00:00 Okay, this is the last video where I have the code and the design side by side. From the next video, because we're working on the larger screen sizes, we're going to have one screen for the code and one screen for the UI and switch back and forth. So the second internal layout container is where I want to switch to a two-column

00:17 layout at the XL breakpoint. And so here at the XL breakpoint, we are already using grid and I will simply have two columns. But if I add grid calls to the default Tailwind utility and I make the screen bigger here, this will indeed work,

00:35 but it doesn't really achieve what we want. Let me turn on the grid lines. And the obvious first problem is the content here is on the left, but you can see that both grid columns have the exact same width. And this is by design how Tailwind's default grid classes work. So if I hover here, you can see that we have this repeat two for two columns,

00:54 and then it's a min-max from zero to one FR. So use the minimum or maximum space between zero being the minimum and one FR, one fraction of what's left per each repeated instance. In the case here, that's two. So if I had grid calls seven,

01:10 it will generate the same, but repeat seven times. So we don't want equal value columns. Remember, we want ones to be auto-sized and ones to take the rest of the space with one fraction unit. So I can have square brackets here and go auto for the first one.

01:25 And then we need the space, but the spaces in arbitrary values are replaced with underscore because the space would be perceived as a class delimiter. So here we have underscore. This will be replaced by a space when Tailwind generates the styles. The second we want is one

01:40 FR. So if I hover over this now, we're going to create two columns, auto, and then one FR, just like we want. The first column is auto-sized and then the rest is taken by the second column. But now we want to invert both. And this is actually pretty easy. We can change, as said here,

01:58 the order of the first grid child, which is this content section. And so here I can go, XL order two. So it's going to take the second cell. And by doing this, we've achieved this inversion that we wanted with the tiles on the left, auto-sized, and then the content section

02:17 taking the rest of the space. And I almost forgot, remember how we said that the gap was increasing to 96 at the XL breakpoint, as we could see here on the Figma design. Let's make sure this is respected. This is the gap here from 12 to 16 on the layout container. And at the XL breakpoint,

02:34 we want to go with gap 24, like this. Nice. And while we're here, we'll also left align the content here. As you can see on the design, it moves to left align instead of center align. And to do that,

02:47 we're going to need to do two things. We're going to switch this items center to an XL items start. So that's going to left align the children containers. But remember, we still have this text centering that we had set, and I'm referring to this text center class. So at the XL, we also

03:06 want to do text left. And with that, this is definitely not looking anything like the design at this point. But on the next and last step of this exercise, we're going to change our flex wrapping series of tiles to a grid to prepare for this beautiful design that will come in the next

03:23 section. All right, let's jump in the last part of this exercise. It's a quick one, but it's going to set us up for the rest of this workshop.