00:00 All right. So we definitely want grid lines turned on for this one. So I'm going to do that right now. So we have the parent grid, which is going to end up controlling the grid cells. And right now we have the tiles grid, which controls the five rows, five columns, sorry, and six rows, but we're going to offset this to the parent grid. And as you'll see,

00:19 it's actually remarkably simple. So here is our UL, which is the logo tiles grid. And at the Excel break point, where here we set five columns and six rows, we want to defer the rows to subgrid. And the way you can do this is replace the number of column with grid rows, subgrid, like so.

00:39 And you can see now the grid template rows is defined to subgrid. Now remember what I said, this is going to break your design and break your brain. And here's what we've done to the design. So we have deferred the rows to the parent grid, but it's now spanning across only one row, which is why everything is stacking on top of each other. So we need to tell another piece of information,

01:00 which is how many rows we want to span across. So we've offset it to subgrid. And here we're going to go Excel, row, span, and want to have the value of six. Our design will still be broken, but sort of less broken. Check this out. Whoa, what's going on? Well, this might look like a total mess,

01:20 but actually it's sort of an organized mess. We have these two first tiles way up there because the first row of the parent grid is taking a lot of space to place this element on the right side. And then everything is completely offset. But if you look at the gap of the child grid and the gap of the parent grid, they're quite different.

01:38 And we can fix that by aligning the gap values between both grids. And this is exactly what we're going to do in the next step.