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
Follow along to see how to lay out the web page using CSS Grid layout.
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
Hey, there, how'd it go?
0:00
Were you able to write most or all of the
grid selectors properties and values for
0:01
this practice session?
0:04
If not no worries, you can watch my
solution, compare it to what you wrote,
0:06
and then try to recreate it yourself.
0:09
The goal was to create a flexible and
0:11
responsive grid layout
that looks like this.
0:13
Now I'll show you how I created it.
0:16
You can also reference this code
when you download the project files.
0:18
First I'll determine which HTML
element is the grid container.
0:21
Looking at index.html I see that the div
0:25
with the class main-content wraps all
the card divs I want to lay out with grid.
0:29
So in the layout.css I'll
replace the placeholder
0:34
selector with the class main-content.
0:39
Then to turn on the grid in the browser,
0:43
I'll set main-contents
display value to grid.
0:46
Now the most challenging part of this
exercise is generating the columns
0:52
automatically.
0:57
So I'll start by adding
the grid-template columns property.
0:59
Then, to automatically fit column
tracks inside the grid container,
1:06
I'll first use the repeat function.
1:11
Which is a shortcut for
setting repeating patterns of tracks.
1:13
As the repetition value,
I'll pass it the keyword, auto-fit.
1:17
Which, as you learned
in the CSS Grid course,
1:22
instructs the browser to generate as many
columns as necessary to fit the available
1:25
space without causing
the grid to overflow.
1:29
Auto-fit also collapses any empty
tracks down to zero pixels.
1:32
That way, grid items can expand
to take up the remaining space.
1:36
Now as a hint,
I mentioned that each column
1:40
should not get narrower than 280 pixels
and if the available space allows it,
1:44
each column should expand to take up
1 fraction of the available space.
1:49
So grid provides the minmax
function to do just that.
1:53
Create fluid tracks that
expand to fill the free space,
1:57
while not getting any narrower
than a specified minimum size.
2:01
So I'll pass minmax as
the track size value to repeat.
2:05
I'll set the min size to 280 pixels,
2:11
then use grid's flexible FR, or
fraction unit, to set the max size.
2:15
I'll set it to 1fr, which means 1
fraction of the available space.
2:21
So this is going to fit as
many 280 pixel wide columns
2:26
as can fit into the grid container
without overflowing its boundaries.
2:31
And if the available space
allows it the columns can expand
2:34
to fill up a fraction
of the available space.
2:38
Finally, to apply a 20 pixel
gutter between rows and
2:42
columns I'll use the grid-gap shorthand
property and set it to 20 pixels.
2:47
I'll give it a save and
test it in the browser.
2:56
So as you can see,
the cards automatically resize and
3:01
shift from a three column layout to
two columns then one column, good.
3:05
So I hope you were able to complete
this grid practice session successfully.
3:10
If not, why not start over and
try to write the grid properties and
3:14
values, without looking at my version.
3:17
I'm also going to teach you more about
grid layout in the last stage of my CSS
3:20
grid course.
3:23
So I'll see you soon and happy coding.
3:24
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