- Introducing fr, a Flexible CSS Length Unit 4:30
- Flexible Tracks Challenge 1 objective
- Set Tracks with repeat() Notation 1:45
- Repeat Notation Challenge 1 objective
- Flexible Track Sizing with minmax() 4:09
- Repeat Tracks with auto-fill and auto-fit 7:23
- Auto-generate Flexible Columns 1 objective
- The Explicit and Implicit Grid 4:52
- Control the Auto-placement of Grid Items 5:43
- Flexible Sized Grids Review 6 questions
Preview
Video Player
00:00
00:00
The Explicit and Implicit Grid
4:52When you create a grid layout with the grid-template-rows and grid-template-columns properties, you are defining what's called an "explicit grid". What happens if there are too many grid items to fit inside the grid you defined?
To handle this uncertainty, Grid Layout provides an "implicit grid." The implicit grid is automatically generated by the grid container to position any extra items outside of the explicit grid.
When you create a Grid Layout, you are
defining what's called an explicit grid.
0:00
That just means it's the grid you
defined with the grid-template-rows and
0:04
grid-template-columns properties.
0:08
You explicitly told the browser
that this is the grid you want.
0:10
But, what happens if there are too many
grid items to fit inside the grid you
0:14
defined?
0:18
For example, say you declare a grid with
three column tracks and two row tracks.
0:19
The explicit grid can only fit six items.
0:24
What if later, your grid
container has nine items or more,
0:28
what happens to those extra items?
0:31
This kind of situation is common when your
page content is dynamically generated and
0:33
you don't know ahead of time how many
grid items will appear on the page.
0:38
For instance,
a listing of photo thumbnails and
0:42
descriptions that are created on a
photo-sharing site could vary depending on
0:45
whose photo it's displaying and
the length of the description.
0:48
So to handle this uncertainty,
Grid Layout provides an implicit grid.
0:51
The implicit grid is automatically
generated by the grid container
0:56
to position any extra items
outside of the explicit grid.
1:00
This is an important concept to keep in
mind when creating your grid because it
1:04
will help you determine the placement and
size of all grid items,
1:08
even items you may not have accounted for.
1:12
And it will help you create
better Grid Layouts overall.
1:15
We've already been working
with implicit tracks.
1:18
Remember when we first defined column
tracks at the beginning of the course?
1:21
Even though we hadn't set row tracks, as
we added new grid items to the container,
1:25
the grid implicitly placed
the items into rows.
1:31
Also, in the previous video, we created
a flexible grid that as you resize
1:34
the viewport, adjusts from three
columns to two columns to one column.
1:40
But we only set two row tracks,
1:45
the first to 100 pixels and
the second to 200 pixels.
1:48
So the third row is in the implicit grid.
1:53
And as the container wraps
items onto new rows,
1:57
the grid creates more implicit
row tracks to position the items.
2:00
Let's explore how and why this happens.
2:05
I'm going to define just three
flexible column tracks by setting
2:08
grid-template-columns to 1fr,
1fr, and 1fr.
2:13
And we'll keep the two row tracks.
2:17
So we've explicitly defined three
column tracks and two row tracks.
2:19
So grid items positioned inside these
tracks will be part of the explicit grid.
2:24
And any items placed outside of
these defined grid tracks will be in
2:29
the implicit grid.
2:33
In the browser,
we see the three flexible columns.
2:34
The first row is 100 pixels tall and
the second 200 pixels.
2:37
But, what about the bottom row?
2:42
Why is it much shorter
than the rows above it?
2:44
Well, you see, the explicit grid
we created fits six grid items,
2:46
three items inside each of the two rows.
2:51
However, there are eight items
inside the grid container.
2:54
So an implicit row track was created
to accommodate the extra two items.
2:59
This extra row is in the implicit grid.
3:04
And if you add more grid items,
for example, two more items,
3:07
The grid will create as many implicit
row tracks as needed to fit the items.
3:15
In this case, it creates one more row.
3:20
Just imagine adding any number of
extra elements to a float-based or
3:24
inline-block layout.
3:28
It would most likely break the layout.
3:30
Then you'd have to spend
costly time fixing it.
3:32
So this is a prime example of just
how intelligent Grid Layout is at
3:34
placing items.
3:39
It makes sure that every grid item has
a well-defined grid area to lay out into.
3:41
Now, notice how the extra two rows
are not as tall as the top two rows.
3:45
Well, this is because implicit
tracks are auto-sized by default.
3:50
So their size is based on content.
3:55
In this case, the rows' heights
are as tall as the content they hold.
3:58
And if you need to set their height,
you could define a third and
4:01
fourth row track with grid-template-rows.
4:06
And the extra items will then
be placed in the explicit grid.
4:09
But you might not always have control over
the number of items in implicit tracks.
4:12
What if more items are added
to the container and
4:17
another implicit row is created and
yet another, and
4:19
you need those implicit
tracks to be a certain size?
4:22
For example, your grid container might
be a section of a site that users post
4:25
content to, like an image gallery or
a section of articles.
4:30
Updating your grid-template-rows
tracklist every time new items are added
4:33
would be counterproductive and
cause bloat in your CSS.
4:38
So Grid provides smarter, more
efficient ways to control the size and
4:42
placement of implicit grid tracks.
4:46
I'll teach you about
them in the next video.
4:49