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
See an overview of the flexible grid layout you'll create.
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
[MUSIC]
0:00
Hey everyone, Guil here,
it's time for more practice,
0:04
practice is a good thing because it
helps make what you've learned stick.
0:07
It also helps you become a faster and
better developer.
0:10
So, let's sharpen your grid skills
by practicing building flexible CSS
0:13
grid layouts.
0:17
This practice session covers
creating flexible column tracks
0:18
using grid features that adapt your
content to available space and
0:22
intelligently size and
position items within the grid container.
0:26
So, you're going to build this
flexible and responsive card layout.
0:30
This session is a follow up to the second
stage of my CSS Grid Layout course.
0:34
So if you haven't taken that yet,
0:38
I suggest you finish the course
before moving forward.
0:40
I've also included a link for
the course in the teacher's notes.
0:43
To get started,
launch the workspace with this video.
0:46
I've included HTML and
CSS files for this exercise,
0:49
an index.html contains six
divs with the class card.
0:53
The file page.css contains
the base styles for
0:58
the page, which you can view when you
preview the workspace in the browser.
1:03
You're going to write your CSS
inside the file layout.css.
1:08
So now,
let's walk through what you'll need to do.
1:13
In layout.css, there are four
comments with instructions on the CSS
1:16
selector styles you'll need to write.
1:20
So first, you'll determine which HTML
element is the grid container, then
1:23
target it by replacing this placeholder
selector with the grid container selector.
1:28
Then you'll need to write the declaration
that turns on the grid in the browser.
1:34
Next, you are going to let the browser
1:39
automatically fit the column
tracks inside the grid container.
1:41
So you'll need to use the grid
functions and keywords that, together,
1:46
auto generate as many columns
necessary to fit the available space
1:50
without causing the grid to overflow.
1:55
And here is a hint,
each column should not get narrower than
1:57
280 pixels and
if the available space allows it,
2:02
each column should expand to take
up one fraction of the free space.
2:06
Finally, you'll apply a 20 pixel
gutter to rows and columns.
2:10
So the goal is to get your
grid layout to look like this.
2:15
As you can see, the layout automatically
resizes from a three column layout
2:19
to two columns, then one column,
all without media queries.
2:23
This exercise is a great way to practice
what you've learned so far about CSS grid.
2:27
So good luck, have fun, and in the next
video, I'll walk you through one solution.
2:32
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