00:00 Okay, this one is pretty simple. We want to change this flex container to a grid. But before, I'm a little bit tired of this yellow, so I'll just refresh the UI until I find a color that I enjoy. Yeah, let's go with that purple. So in the code, I will scroll down to the unordered list,

00:15 which as you can see, is defined as a flex container that wraps. And at the Excel, we want to change this to a grid. By default, just having the grid class will set a one column grid. So you can see that it's stacking on top. And because it's sized to auto, it gives all the space left

00:33 to the other side, the content. Remember, we want five columns and six rows. So I will also add for the Excel breakpoint, grid calls five and Excel grid rows six. And that should look much better.

00:50 And it sure does. And you know what, let's make it fun and turn the other grid lines on. And maybe we can remove the first grid. So now we can clearly see what's happening. Next, we still have the problem where the tiles are flowing from left to right and from top to bottom. And we want to

01:05 switch that from top to bottom first, and then move from left to right. And that is ridiculously easy. We can do one more time for the Excel breakpoint. We want to change the auto flow of our grid from a grid flow row to grid flow call for grid auto flow columns. And just like

01:23 that, we now have top to bottom, left to right flowing, just like we want. And I've put the grid lines here because now you understand that the grid is correctly positioned with the correct gap. But if I turn that off, it's a little bit off putting because there's that big gap. And what

01:39 happens is the last row is not filled because we don't have enough tiles. But this will completely change when we start positioning specifically each logo in a specific cell to achieve this art directed grid. And that concludes this exercise. We're definitely getting there. Congratulations. You're doing a great job.