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
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