Now that you know the basic concepts and terminology behind CSS Grid Layout,

you're ready to learn the first steps in creating a grid,

defining the grid container and setting up columns and rows.

In this video, I'll introduce you to the grid display value and

two grid related properties, grid-template-columns

to define the columns, and grid-template-rows to define the rows.

To follow along, launch the workspace for this video or

download the project files to use your preferred text editor.

In the index.html file, there is a reparative with the class grid,

and nested inside are three divs with a class item.

Over in the CSS folder, there are two style sheets, page.css and grid.css.

Page.css simply contains the base styles for the page.

You can see the base styles once you preview your workspace in the browser.

We're going to write our grid layout styles here inside grid.css.

CSS grid layout starts with a grid container.

A grid container is defined by setting an element's display property to grid.

So, the div, with the class grid is going to be our grid container.

And not only in the class grid, but

you can turn any CSS selector into a grid container.

So, over in grid.css, we'll create a new rule that targets grid,

and let's start by giving it a max-width of 800 pixels,

then set its display value to grid.

Setting display to grid turns on the grid in the browser.

So now, all direct children of grid,

the item divs, automatically become grid items.

Now in the browser,

aside from the width we set, you won't see any visible changes yet.

That's because by default,

the grid container places its grid items in a single column.

So now we're going to place the grid items into multiple columns and rows.

In CSS grid layout, columns and rows or

the space between two adjacent grid lines are referred to as grid tracks.

You use the grid-template-columns property to set the column tracks, and

grid-template-rows to set the row tracks.

Both properties specify the size of each grid track.

You declare these properties on the grid container.

You see,

the grid container CSS rule is like your grid layout configuration rule because

you're able to manage most of what happens in your grid from just this one rule.

So let's first create column tracks by adding grid-template-columns inside

the grid rule.

And the value for

this property is a space-separated list of values known as a track list.

Each value in the track list specifies the size of a column, and

there are several ways to define these track values.

The most straightforward is using CSS length units like pixels.

I'll show you some of those in this video, but

there are more advanced methods like flexible length units and

sizing functions, which you'll learn in the next part of this course.

So to layout each of the three items inside the grid container div,

we'll need to define three column tracks.

I'll start by setting each column track value to 200 pixels.

The three grid tracks setup three equal sized columns.

It displays the items side by side, each 200 pixels wide.

And changing a value will change the size of its corresponding column track.

For example, setting the first value to 320 pixels makes the first column wider.

You can also use percentages to set a column's width relative to the width of

the grid container.

So for example, the third column is now 20% wide.

And you can use M and RAM values, even the CSS calc function in your track list.

So feel free to pause the video and

experiment with different track size values on your own.

But I'll go ahead and set the track list back to 200 pixels for all 3.

So now notice how there's all this extra space after the last column.

Well, that's because we've set three fixed width columns and

their combined widths do not take up the full width of the grid container.

Well, when you set any of the column tracks value to auto, for example,

the middle column, it will expand the column to fill up the extra space.

So the middle column is now flexible while the first and last columns are fixed.

Now this is just one of the ways you're able to create flexible grid columns.

And you'll learn more advanced methods using flexible length units and

sizing functions in the next stage.