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
Before you begin building layouts with CSS Grid, you should understand some of the concepts and terminology behind it.
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
Before you begin building
layouts with CSS Grid,
0:00
you should understand some of
the concepts and terminology behind it.
0:02
I'm going to be using the terminology and
0:06
concepts covered in this video throughout
the course, so pay close attention.
0:08
You may even wanna write them down
to help remind you what they mean
0:12
as you watch the videos
later in this course.
0:15
The two most important elements in
CSS Grid Layout are grid containers and
0:17
grid items.
0:22
The first step to using grid
is defining a grid container.
0:23
The grid container establishes
the grid formatting context and
0:27
manages how its direct child elements
are spaced, sized, and aligned.
0:31
When you create a grid container,
0:35
all direct children of that
element become grid items.
0:37
And there can be any number of grid
items inside the grid container.
0:40
For example, in this code,
the main element is a grid container, and
0:44
its direct children,
the article elements, are grid items.
0:48
If you nest other elements like headings,
paragraphs, and
0:52
images inside the main element,
they become grid items too.
0:55
Once you've established
the grid formatting context,
0:59
you can start positioning and
aligning content into a grid.
1:02
And the grid is formed by
an intersecting set of horizontal and
1:05
vertical lines called grid lines.
1:09
Grid lines divide the grid
container space into columns and
1:11
rows, or the areas into which grid
items are aligned, sized, and placed.
1:15
Horizontal grid lines
position the rows and
1:20
vertical grid lines position the columns.
1:23
A grid line exists on either
side of a column or row.
1:25
So in other words,
1:28
the space between two adjacent grid
lines forms either a column or a row.
1:30
This will all start to make more sense in
the next video where you'll create a grid
1:35
using the core properties of CSS Grid.
1:39
Also be sure to have look at
the helpful Grid resources I've
1:42
posted in the teacher's
notes of this video.
1:44
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