- 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
Repeat Tracks with auto-fill and auto-fit
7:23Grid layout lets you set items to automatically wrap and adjust to fit their container's width. This lets you create designs that respond to different browser widths. The Grid Layout repeat notation supports two keywords -- auto-fill and auto-fit -- to help with this.
Grid layout lets you set items
to automatically wrap and
0:00
adjust to fit their container's width.
0:04
This lets you create designs that
respond to different browser widths.
0:06
The grid layout repeat notation
supports two key words, auto-fill and
0:11
auto-fit, to help with this.
0:16
You can see with our current design,
0:18
the column track has min size of
200 pixels and a max of 1fr.
0:21
Well the columns are overflowing
the grid container when the container
0:26
space is less than the combined
minimum column sizes and gap sizes.
0:31
We've set the repeat value to 3 tracks,
so the browser is
0:36
always going to generate 3 column tracks,
no matter the width of the grid container.
0:41
Well you know that with CSS you can
use media queries to adjust the layout
0:47
at a given break point.
0:52
For example,
wrap overflowing items onto a new row.
0:53
Well the good news is that in some cases
grid layout saves you from having to write
0:56
media queries to adjust your layout.
1:00
In repeat notation for
example, the auto fill and
1:02
auto fit keywords, instruct the browser
to generate as many columns necessary
1:07
to fit the available space without
causing the grid to overflow.
1:12
So instead of passing a specific number of
tracks to repeat use either auto fill or
1:16
auto fit and the browser will
automatically generate enough tracks
1:21
to always take up the width
of the grid container.
1:26
In addition they can wrap and
1:28
adjust accordingly to their container
width, like in this example.
1:30
Auto-fill and auto-fit are like the magic
ingredient in responsive grid layout.
1:34
To better explain how they work,
I'll first remove minmax
1:41
from the repeat function, for now,
and replace it with 200 pixels.
1:45
Then set the repetition
value to auto-fill.
1:51
So what's the difference between
the number value and auto-fill?
1:57
Well, instead of forcing the browser
to fit a specific number of columns
2:01
inside the container, we're setting just
the size of our tracks, 200 pixels, and
2:06
letting the browser figure out how many
columns will fit in the available space.
2:11
So here, auto-fill is instructing
the browser fit as many 200px wide
2:15
columns as you can fit into the container
without overflowing its boundaries.
2:20
It also takes the grid gaps into account.
2:25
So our grid container is set
to a max width of 1000px,
2:27
so in this case,
the grid auto generates four columns
2:32
to fit a max of four grid items
within the container's width.
2:36
And all remaining items
wrap to the next row.
2:41
And when I shrink the width of the grid
container, by resizing the browser,
2:44
as soon as the grid can no longer
accommodate four 200 pixel-wide columns,
2:49
the grid automatically adjusts to
three columns, then two columns, and
2:54
finally one column.
2:58
And if I set the track sizes to
a smaller value like 60px, the grid
3:02
automatically creates as many 60px wide
columns as will fit the container width.
3:09
In this case it's able to place all
eight grid items on the first track and
3:15
the white space below them is
the empty row track, set to 200px.
3:20
And you can see how the items adjust
to the grid container size, and
3:26
fill up the second row track
by resizing the browser.
3:29
Now, see this gap of the left over
space to the right of the columns?
3:34
These are actually empty column tracks
being created, by repeat and auto-fill.
3:39
So even though we have only eight grid
items, if say 13 columns are able to fit,
3:45
auto-fill will fill the remaining
space with empty column tracks.
3:51
So in this case five empty column tracks.
3:56
And if I quickly add five more
grid items to the container,
4:00
you'll see how the grid items
fill up the empty tracks.
4:05
Now, when you use auto-fill or
4:10
auto-fit with pixel values,
you lose your flexible column.
4:13
So, for example, notice how there's
still some empty space left over here.
4:18
Well, you can combine minmax
with auto-fill to distribute any
4:23
remaining space among these 60px columns.
4:27
With minmax, and
passing it a min of 60px and a max of 1fr.
4:32
And the items now completely fill
the width of the grid container.
4:41
The key words auto-fill and
auto-fit have similar behavior.
4:48
They both generate as many columns
4:53
as will fit the available space
without causing the grid to overflow.
4:56
The difference between the two becomes
apparent when you use minmax for
5:00
flexible column sizes.
5:04
The biggest difference
between auto-fill and
5:05
auto-fit is how they handle
the empty repeated tracks.
5:09
So for example if I comment
out the five new grid items
5:13
from the grid container,
we once again see the empty column tracks
5:18
even though we've set
a flexible max of 1fr.
5:23
Again, that's because auto-fill generates
as many columns as necessary to fit
5:28
the items within the grid container width
even if it means generating empty tracks.
5:34
So how do we get the column
tracks to stretch and
5:40
resize to fit the full
width of the container?
5:43
Well we can prevent displaying
empty columns with auto-fit.
5:46
Auto-fit collapses any empty
tracks down to zero pixels.
5:52
That way, grid items can expand
to take up the remaining space.
5:57
So, here, the empty tracks collapse, and
6:02
since we've set a max size of 1fr,
wherever there is
6:04
extra free space in the grid container,
the columns expand to take up that space.
6:09
And the grid still auto adjusts
according to the container size.
6:14
All right, so
going back to our question from earlier.
6:20
When repeat is set to 3, minmax(200px,
6:24
1fr), how do you prevent the columns
from overflowing the container?
6:31
Well we want the items to resize and
6:37
wrap automatically depending
on the container width.
6:40
Well instead of dictating
the number of tracks, 3,
6:43
we'll let the browser figure out
the repetition number with auto-fit.
6:46
That way, any empty tracks will collapse.
6:53
And let's make the min track size
a little wider, let's say 250px.
6:57
And now we're displaying a flexible,
three-column layout in
7:04
wide viewports, a two column
lay out in medium viewport and
7:09
a one column layout out in small screens.
7:13
The best part we didn't
have to use media queries.
7:16