Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed CSS Grid Layout!
You have completed CSS Grid Layout!
Preview
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.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Now that you know the basic concepts and
terminology behind CSS Grid Layout,
0:00
you're ready to learn the first
steps in creating a grid,
0:04
defining the grid container and
setting up columns and rows.
0:06
In this video, I'll introduce you
to the grid display value and
0:10
two grid related properties,
grid-template-columns
0:13
to define the columns, and
grid-template-rows to define the rows.
0:17
To follow along,
launch the workspace for this video or
0:21
download the project files to
use your preferred text editor.
0:24
In the index.html file,
there is a reparative with the class grid,
0:27
and nested inside are three
divs with a class item.
0:32
Over in the CSS folder, there are two
style sheets, page.css and grid.css.
0:37
page.css simply contains
the base styles for the page.
0:42
You can see the base styles once you
preview your workspace in the browser.
0:46
We're going to write our grid
layout styles here inside grid.css.
0:50
CSS grid layout starts
with a grid container.
0:55
A grid container is defined by setting
an element's display property to grid.
0:58
So, the div, with the class grid
is going to be our grid container.
1:02
And not only in the class grid, but
1:08
you can turn any CSS selector
into a grid container.
1:09
So, over in grid.css,
we'll create a new rule that targets grid,
1:12
and let's start by giving it
a max-width of 800 pixels,
1:18
then set its display value to grid.
1:23
Setting display to grid turns
on the grid in the browser.
1:29
So now, all direct children of grid,
1:33
the item divs,
automatically become grid items.
1:36
Now in the browser,
1:40
aside from the width we set,
you won't see any visible changes yet.
1:41
That's because by default,
1:45
the grid container places its
grid items in a single column.
1:47
So now we're going to place the grid
items into multiple columns and rows.
1:50
In CSS grid layout, columns and rows or
1:54
the space between two adjacent grid
lines are referred to as grid tracks.
1:57
You use the grid-template-columns
property to set the column tracks, and
2:02
grid-template-rows to set the row tracks.
2:07
Both properties specify
the size of each grid track.
2:10
You declare these properties
on the grid container.
2:13
You see,
2:16
the grid container CSS rule is like your
grid layout configuration rule because
2:16
you're able to manage most of what happens
in your grid from just this one rule.
2:21
So let's first create column tracks by
adding grid-template-columns inside
2:26
the grid rule.
2:30
And the value for
2:34
this property is a space-separated
list of values known as a track list.
2:35
Each value in the track list
specifies the size of a column, and
2:40
there are several ways to
define these track values.
2:44
The most straightforward is using
CSS length units like pixels.
2:47
I'll show you some of those in this video,
but
2:50
there are more advanced methods
like flexible length units and
2:52
sizing functions, which you'll learn
in the next part of this course.
2:55
So to layout each of the three items
inside the grid container div,
2:59
we'll need to define three column tracks.
3:03
I'll start by setting each column
track value to 200 pixels.
3:06
The three grid tracks setup
three equal sized columns.
3:12
It displays the items side by side,
each 200 pixels wide.
3:17
And changing a value will change the size
of its corresponding column track.
3:21
For example, setting the first value to
320 pixels makes the first column wider.
3:24
You can also use percentages to set
a column's width relative to the width of
3:32
the grid container.
3:37
So for example,
the third column is now 20% wide.
3:38
And you can use em and rem values, even
the CSS calc function in your track list.
3:43
So feel free to pause the video and
3:49
experiment with different
track size values on your own.
3:50
But I'll go ahead and set the track
list back to 200 pixels for all 3.
3:53
So now notice how there's all this
extra space after the last column.
4:00
Well, that's because we've set
three fixed width columns and
4:04
their combined widths do not take up
the full width of the grid container.
4:08
Well, when you set any of the column
tracks value to auto, for example,
4:13
the middle column, it will expand
the column to fill up the extra space.
4:19
So the middle column is now flexible while
the first and last columns are fixed.
4:23
Now this is just one of the ways you're
able to create flexible grid columns.
4:29
And you'll learn more advanced methods
using flexible length units and
4:33
sizing functions in the next stage.
4:36
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up