00:00 So down here, we have defined the column start, the row start, the row span, but we still only have one column. And what we want to do is have two columns. So if I went excel grid calls to, this would create two columns, but it's going to create two equal width columns because of

00:18 the default tailwind classes using minmax 0 1fr. What we want to do here is have auto for the logo, so it just takes the space available for the logo and then the rest should take 1fr to just span across whatever's left. So I will change grid calls to an arbitrary value that says auto and

00:37 then 1fr. This is still not going to look great because the auto is being completely stretched from our paragraph here that wants to take as much space as it can. And so the last thing we

00:51 need to do is make this paragraph span across two columns. As you can see here, it spans from below the logo and the heading. So we're going to go with col span 2 to make it span across both columns. So this will happen on the paragraph tag. So all the way down here, let's add another line,

01:10 or although it's not animation, so maybe I'll make it up here, xl col span 2. And that should drastically improve the situation. Hey, that is much better. We still have a problem here where

01:25 the paragraph text is going to keep stretching the second column of this grid. So if that text was longer, I'm adding some characters, we would stretch and stretch and stretch until we reach the edges of the viewport. And if I was zooming out, you can see that our grid will start to

01:42 really look ridiculous. So what we want to do, let me refresh that to get the text back. Oh, and these colors, I don't like too much. Yep, I like that. So what we want to do is have a max width container on the parent grid. So this is going to stop growing eventually at a decent

02:01 size that we define. And while I go back up, let me remove the comments for the things that we've done. I believe that we have done all of this. Logo tile and the first row and coordinate. Oh, we have not done the gap coordination. You've probably seen this as you're watching this video

02:20 and what we haven't done here is the gap horizontally between here. The vertical gap is taken care of because we are using subgrid and the parent rows are dictating the spacing, but we need to have this gap four here on the two columns grid so that the spacing is

02:36 consistent with everything else. Just like it's the case with the design where this spacing here is the same as the gap between the tiles. All right. So here we have this two column grid and we have to go also XL gap and I could go gap X, but I can just go gap four. It is not

02:55 really going to affect the vertical gap. And yeah, this is looking much better now with the gap. Obviously the alignment is wrong, but we'll fix that in the next lesson. But let's put the max width container here for now to wrap up this segment. So we have done all this and I'm glad

03:09 I read the comments. And if we go right at the top here, you can see that a 7XL max width container is going to take us where we want at the XL breakpoints. So this is the parent grid that

03:22 contains everything. And as the XL breakpoint, we want max width 7XL. And this is going to prevent the text from going on and on and on and stretch the grid. It's going to stay at a maximum of max

03:36 width 7XL. And this is starting to look super nice. All right. We got one more step where we're going to take care of the placement of each element of the content section within their cells. And after that, things are going to look seriously good.