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
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
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