Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
CSS Grid gives you control over the spaces (or gutters) between columns and rows. You separate grid tracks using the grid-row-gap and grid-column-gap properties.
With CSS grid you have total
control over the spaces or
0:00
gutters between columns and rows.
0:04
You separate grid tracks using the grid
row gap and grid column gap properties.
0:06
So first I'll remove the h2 paragraph and
text from the grid container.
0:12
Give that a save and
over in the grid rule,
0:18
let's set a gutter between our
column tracks with grid column gap.
0:22
The value for grid column gap and
grid row gap can be any CSS length unit,
0:29
or a percentage of
the parent container width.
0:34
I'll set grid column gap to 20 pixels.
0:37
And as you can see that creates a 20
pixel gutter between the column tracks.
0:42
Now let's set a gutter for
the row tracks and the grid row,
0:48
add grid row, gap,
let's set it to 15 pixels.
0:53
And you'll notice how the gutters do not
appear on the outer edges of the grid so
1:00
there is no gutter before the first row
and column track or after the last tracks.
1:05
The gaps are created between
adjacent columns and rows only.
1:11
There's also a handy shorthand
property for sorting both row and
1:15
column gaps at once, grid-gap.
1:19
So back in my CSS,
i'll replace the column and
1:21
row gap properties with just grid gap.
1:26
And in the shorthand property,
the first value sets the grid row gap,
1:30
and the second value
sets the grid column gap.
1:36
And writing just one value sets the gutter
size for both columns and rows.
1:43
So now we have 15 pixel gutters
between all rows and columns.
1:50
And that's the basics of creating a grid.
1:55
You've just setup a CSS
grid layout in your page.
1:58
Feel free to experiment
with the grid tracks and
2:01
grid-gap values to see how
it changes the layout.
2:04
Now let's quickly review how the grid
we created maps to the terminology
2:08
concepts you've learned earlier.
2:12
You know that the grid did
is a red container and
2:15
the direct child elements
are the grid items.
2:18
When we defined the grid tracks
with grid template columns and
2:21
grid template rows grid provided us
numbered lines called grid lines
2:25
to use for positioning the items.
2:30
You can refer to each grid
line by a numerical index.
2:33
Columns start at one,
from left to right, by default and
2:37
rows also begin at one from top to bottom.
2:41
Keep in mind that a grid line
isn't a complete column or row.
2:44
For instance, it takes two grid
lines to make a single column,
2:48
one line on either side.
2:52
So our three column, two row grid consists
of four column lines and three row lines.
2:54
The vertical lines 1 and 2 determine the
start and end points of the first column,
3:01
lines 2 and 3 the second column,
and lines 3 and 4 the third.
3:07
Similarly, horizontal lines one and two
determine the position of the first row,
3:12
and lines two and three the second row.
3:17
Finally, grid gaps create separation
between columns and rows,
3:19
but they do not affect
the position of grid lines.
3:24
In other words, there's just a single
grid line between two columns even if
3:28
there's a large gap between the columns.
3:32
In a later video,
3:35
you'll learn how to place items
on the grid using line numbers.
3:36
So knowing these concepts now will
help you better understand how
3:40
line-based positioning works.
3:44
You've learned the most important
parts of CSS grid layout and
3:46
you're starting to see how grid simplifies
the code needed to create layouts that
3:50
used to require lots of extra code.
3:54
But we're just getting started.
3:56
In the next stage you'll get to know
grids, intelligent resizing and
3:58
replacement abilities.
4:02
You'll learn to use a new flexible length
unit designed just for grid, write your
4:03
track list using less code, expand
grid items to fit available space and
4:08
how to make items automatically wrap and
adjust according to the container width.
4:12
See you soon.
4:17
You need to sign up for Treehouse in order to download course files.
Sign up