Transcript
00:00 All right, so we're going to take this content section, which is currently a flex container. We will turn this into a grid so that we can turn it into a sub-grid and align it with the tiles on the left. Let's do this. So this is the parent grid here, and we're going to work on the div below,
00:18 which is the content wrapper. So we want to turn this into a grid first so that we can do sub-grid. Currently, it's a flex container. So maybe I'll go on a new line here, scroll a bit, and at the Excel break point, I will turn this into a grid. Nothing much has changed, except now you can see that we have
00:36 a three row single column grid. And now we can defer this grid to the parent grid with a sub-grid. Like before, we'll do this on the rows. So Excel, grid, rows, sub-grid. And now it's all stacked on one row until we tell how many rows to span for.
00:53 And so we'll go Excel, row, span, two. All right, nice. This is taking shape. The next thing we want to do is instead of starting at the top here, we want it to start at the third row and use these two rows here. And we can define which row to start. Remember how we did here for the columns and rows. We can do the same,
01:13 and we're going to go with row, start, one, two, three. So Excel, row, start, three. Whoops, by doing this, we have messed up the column start. So we are also going to explicitly say col, start, two. So this is the first column of the parent grid, and this is the second column.
01:33 So I will also add Excel, col, start, two. And now we are getting in good shape. All right, we'll do two more things before we move on. I can remove all of these comments. We've done this, done this, done this, done this. And you can see here that it tells us to undo the max-width MD at the Excel breakpoint.
01:52 The content is not using the full space that it could. Remember, this second column is set to one FR, but we have this max-width container that still clamps this content section, and we don't want this anymore now. So here we have max-width MD, and then at the Excel breakpoint, we're going to go with max, with none.
02:11 There we go. And the last thing we want to do, a little bit of cleanup. Remember how we've used the order two to place this content section to the right before, but now we explicitly having a col, start, and row, start, so the order two class doesn't do anything, so let's remove it. And the one I'm talking is this one here,
02:30 so I can delete that. And with that, we're ready to move to the next step.