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 Practice Flexible CSS Grid Layout!
You have completed Practice Flexible CSS Grid Layout!
Preview
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