So how'd it go, were you able to write most or

all of the grid selectors properties and values for this practice session?

If not, that's okay, you can watch my solution, compare it to what you wrote,

and then try to recreate it yourself.

The goal was to get the layout to look like this, as you can see,

it consists of three column tracks and three row tracks.

Now, let's go over the solution, and

you can also reference this code when you download the project's files.

So first, I'll determine which HTML element is the grid container.

Well, looking at the HTML,

I see that the div with the class wrapper contains the elements to layout with grid.

So in grid.css,

I'll replace the placeholder selector with the class selector wrapper.

CSS grid layout starts with a grid container, so next, in the wrapper rule,

I need to write the declaration that turns on the grid in the browser.

Remember, a grid container is defined by setting an element's display property

to grid.

Now all direct children of wrapper automatically become grid items,

I can start positioning and aligning them into a grid.

Now that I've established the grid formatting context,

I'm going to declare the three row tracks.

The grid template rows property creates rows in the grid.

And the row tracks should be declared as 100 pixels, 400 pixels, and 200 pixels.

Next, I'll declare the three column tracks,

you set grid columns with grid-template-columns.

And I'll make all three columns 320 pixels wide.

Finally I can create separation between columns and rows,

using the grid-row-gap and grid-column-gap properties.

So first I'll apply a 20 pixel gutter to the rows,

with grid-row-gap: 20px, and set 15 pixel

column gutters with grid-column-gap: 15px.

You could have also used the grid gap shorthand property,

to set both the row and column gaps at once.

For example, I'll replace the column and row gap properties with grid-gap.

The first value sets the grid row gap, and the second value sets the grid column gap.

All right, so now I've set up a grid that's made up of three columns and

three rows.

Remember, the grid is made of a set of intersecting horizontal and

vertical lines called grid lines.

So this grid consists of four column grid lines, and four row grid lines.

So I hope you were able to complete this grid practice session successfully.

If not, why not start over and try to write the grid properties and

values without looking at my version.

I'm also going to teach you a whole lot more about grid layout in the last two

stages of my CSS grid course, so I'll see you soon, and happy coding.