Preview
Video Player
00:00
00:00
Defining a Grid
4:39Now 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.
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