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 CSS Grid Layout!
You have completed CSS Grid Layout!
Preview
Now that you know the basic concepts and terminology behind CSS Grid layout, you're ready to learn the first steps in creating a Grid: defining the grid container and setting up columns.
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
defining the grid container and
setting up columns and rows.
0:00
In this video, I'll introduce you
to the grid display value and
0:01
two grid related properties,
grid-template-columns
0:04
to define the columns, and
grid-template-rows to define the rows.
0:08
To follow along,
launch the workspace for this video or
0:12
download the project files to
use your preferred text editor.
0:15
In the index.html file,
there is a reparative with the class grid,
0:18
and nested inside are three
divs with a class item.
0:23
Over in the CSS folder, there are two
style sheets, page.css and grid.css.
0:28
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