Why does my page get rendered all at once?

Question

My understanding is that the event loop can get a bit complicated. I'm fairly new to JavaScript and the web in general so it's even more complicated for me. However, I have a made a grid on the screen using grid layout. All I wanted to do was to fill each box with red color but I'd like to see this filling happen. What happens instead is that the loop is being computed and then everything gets rendered at the same time. How can I manage to make it look like an animation of some sort? Maybe point towards some resource so I can read about this? I searched for event loop, loops and renders but found way too much information. Any help thanks in advance!

for(let i = 1; i < 100; i += 2){
    setTimeout(() =>{
        const squareElement = document.querySelector('.grid :nth-child('+i+')');
        console.log('.grid:nth-child('+i+')');
        squareElement.style.backgroundColor = 'red';  
    }, 2000 );
}

There's my code. As you can see I even put a setTimeout so I can render one by one.