The Solution

So how'd it go, were you able to write most or 0:00 all of the grid selectors properties and values for this practice session? 0:02 If not, that's okay, you can watch my solution, compare it to what you wrote, 0:06 and then try to recreate it yourself. 0:10 The goal was to get the layout to look like this, as you can see, 0:12 it consists of three column tracks and three row tracks. 0:15 Now, let's go over the solution, and 0:19 you can also reference this code when you download the project's files. 0:20 So first, I'll determine which HTML element is the grid container. 0:24 Well, looking at the HTML, 0:29 I see that the div with the class wrapper contains the elements to layout with grid. 0:31 So in grid.css, 0:36 I'll replace the placeholder selector with the class selector wrapper. 0:38 CSS grid layout starts with a grid container, so next, in the wrapper rule, 0:45 I need to write the declaration that turns on the grid in the browser. 0:50 Remember, a grid container is defined by setting an element's display property 0:54 to grid. 0:59 Now all direct children of wrapper automatically become grid items, 1:02 I can start positioning and aligning them into a grid. 1:07 Now that I've established the grid formatting context, 1:11 I'm going to declare the three row tracks. 1:14 The grid template rows property creates rows in the grid. 1:18 And the row tracks should be declared as 100 pixels, 400 pixels, and 200 pixels. 1:27 Next, I'll declare the three column tracks, 1:36 you set grid columns with grid-template-columns. 1:39 And I'll make all three columns 320 pixels wide. 1:46 Finally I can create separation between columns and rows, 1:52 using the grid-row-gap and grid-column-gap properties. 1:56 So first I'll apply a 20 pixel gutter to the rows, 2:00 with grid-row-gap: 20px, and set 15 pixel 2:05 column gutters with grid-column-gap: 15px. 2:11 You could have also used the grid gap shorthand property, 2:16 to set both the row and column gaps at once. 2:21 For example, I'll replace the column and row gap properties with grid-gap. 2:24 The first value sets the grid row gap, and the second value sets the grid column gap. 2:32 All right, so now I've set up a grid that's made up of three columns and 2:40 three rows. 2:44 Remember, the grid is made of a set of intersecting horizontal and 2:46 vertical lines called grid lines. 2:50 So this grid consists of four column grid lines, and four row grid lines. 2:52 So I hope you were able to complete this grid practice session successfully. 3:00 If not, why not start over and try to write the grid properties and 3:03 values without looking at my version. 3:06 I'm also going to teach you a whole lot more about grid layout in the last two 3:08 stages of my CSS grid course, so I'll see you soon, and happy coding. 3:11