Preview
Video Player
00:00
00:00
Control the Auto-placement of Grid Items
5:43Knowing why and how implicit grid tracks are created is important when working with grid layout. You might not always know exactly how many items will be in your grid container. What if you need to size or position implicit tracks a certain way? That could get tricky, because there could be any number of implicit tracks.
Knowing why, and
how implicit grid tracks are created,
0:00
is important when working
with grid layout.
0:04
As I mentioned in the previous video,
0:06
you are not always going to
place every item manually.
0:08
And depending on the site you're building,
0:11
you might not always know exactly how many
items will be in your grid container.
0:13
So grid layout generates
implicit grid tracks
0:17
to position any items
outside of the explicit grid.
0:20
But what if you need to size or
position implicit tracks a certain way?
0:24
That could get tricky, because there
could be any number of implicit tracks.
0:28
In our layout, there are just 2
explicit row tracks that declared,
0:32
100 pixels and 200 pixels.
0:37
And the grid container has 10 grid items.
0:39
The extra four items here are placed
into implicit row tracks,
0:43
and they're only as tall
as the content inside them.
0:48
But I want all the extra rows to be a
specific size, let's say 250 pixels tall.
0:51
Well, I wanna avoid having
to specify 250 pixels for
0:57
each extra track here
in grid-template-rows.
1:01
Even with repeat notation, because
the number could keep changing, right?
1:05
Well, CSS Grid provides a simple and
1:09
automated way to control the size and
position of implicit tracks.
1:12
That way I can make any number of
implicit tracks 250 pixels tall
1:16
from a single property and value.
1:20
The grid-auto-rows property controls
the size of implicit row tracks and
1:22
grid-auto-columns controls
implicit column tracks.
1:27
In the grid rule, let's add
grid-auto-rows and set it to 250 pixels.
1:31
So now, the implicit row tracks
take on the 250 pixel height.
1:41
In fact,
1:46
any implicit row track that gets created
from now on will be 250 pixels tall.
1:47
So what do you think
will happen if we delete
1:52
the grid-template-rows
declaration from the grid rule?
1:55
Well, now the only explicit tracks in
our grid are the three column tracks.
1:59
So the grid creates implicit
row tracks to hold the items.
2:05
All grid rows are now 250 pixels
tall because they're being sized
2:09
by grid-auto-rows.
2:14
To create implicit rows
that are a minimum size but
2:16
then grow to fit more content,
you can use the handy minmax function.
2:19
For instance, I'll set grid-auto-rows
to minmax 150 pixels and
2:23
auto, And the rows will be no shorter
2:32
than 150 pixels and they can grow to
accommodate more content, if necessary.
2:37
So we've seen how the grid creates rows
to accommodate the extra grid items.
2:43
But the grid can also place extra
items into implicit columns.
2:47
This is done using the grid
auto flow property.
2:52
To demonstrate, I'll bring back the two
row tracks with grid-template-rows and
2:55
set each to 100 pixels.
3:01
Once again, the first and
second rows are part of the explicit grid.
3:06
Wile the third and
fourth rows are in the implicit grid.
3:11
Well, with grid-auto-flow we
can specify whether to place
3:15
extra items inside implicit rows or
columns.
3:20
In other words, instead of auto
placing these items inside rows,
3:23
we can position them
alongside our columns.
3:27
Back in the grid rule let's add
the grid-auto-flow property.
3:31
And the default value for
grid-auto-flow is row,
3:40
that's why we get extra rows by default.
3:43
To switch them to columns,
set the value to column.
3:47
And this positions the extra items
inside implicit columns instead of rows.
3:53
So notice how the browser shifts them
inside the first two row tracks and
3:58
positions them next to the columns.
4:02
And with grid-auto-flow set to column,
4:04
the grid will keep adding
new columns as necessary.
4:06
So now we can, for example,
4:09
control the size of implicit column tracks
with the grid-auto-columns property.
4:11
So, let's replace grid-auto-rows
with grid-auto-columns.
4:17
And set the value to 100 pixels.
4:25
Now all implicit column tracks
will be 100 pixels wide.
4:30
And if you want all columns
to be the same width use 1fr.
4:35
Keep in mind that when you
set grid-auto-flow to column,
4:44
you're changing the natural
flow of the grid items.
4:48
So notice how the number order
of the grid items has changed.
4:51
Instead of placing items one
through five across one row and
4:55
six through ten across the next row the
number order now flows down each column.
4:59
For example, one, two, three,
four, five, six, and so on.
5:04
At this point feel free to add more items
to the grid container to see how grid
5:08
positions the extra items
in the implicit grid.
5:12
And experiment with the different
auto placement properties and values.
5:15
Be sure to check the resources in
the teacher's notes to learn more
5:20
about auto placement in CSS Grid Layout.
5:22
I'll see you in the next stage where
you'll learn alternate methods for
5:25
positioning items on the grid, for
5:29
example, by line numbers and
name grid areas.
5:30
And you'll work with
the new CSS Grid Inspector,
5:33
a feature built into the Firefox
Developer Tools, that helps you
5:35
visualize your grid as well as inspect and
debug grid layouts in the browser.
5:39