- 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
Flexible Track Sizing with minmax()
4:09One of the most useful features in Grid Layout is the minmax() function. minmax() lets you set a grid track's minimum and maximum size.
One of the most useful features in
Grid Layout is the minmax function.
0:00
Minmax lets you set a grid
track's minimum and maximum size.
0:05
For example, you might give certain tracks
a minimum size to make sure the content
0:09
doesn't become too narrow or short and
set a max size to ensure tracks don't
0:14
get too wide or tall, or expand to fit
content that might be added later.
0:19
Being able to set how small and how large
a grid track can be will help you build
0:24
complex layouts that adapt your content
to a wide range of viewport sizes.
0:28
And it makes it possible to create
responsive Grid Layouts without the use
0:33
of media queries.
0:38
All right, so in our grid rule,
0:39
let's create a new track list
that sets three column tracks.
0:42
We'll set the first track to minmax and
the second and third tracks to 1fr.
0:46
Now let's define our min and
max values for the first track.
0:54
The minmax function accepts two values.
0:58
The first value is the minimum.
1:01
And the second value is the maximum.
1:03
And keep in mind that the value for
1:05
min needs to be smaller than the value for
max.
1:07
Otherwise, the browser
will ignore the max value.
1:10
And the function will
not work as intended.
1:12
So I'll pass it a min value of 200 pixels,
1:14
followed by a comma, and
a max value of 300 pixels.
1:18
So this means that the first column track
will not get any narrower than 200 pixels.
1:23
And once it expands to the max value
of 300 pixels, it won't get any wider.
1:30
And the other two columns set to
1fr will divide the free space.
1:35
So let's have a look.
1:40
Resizing the browser,
once the first column here hits
1:42
a min width of 200 pixels,
it does not get any narrower.
1:47
And once it hits the max width of
300 pixels, it doesn't get wider.
1:52
You can also use the fr unit with minmax,
but only for the max value.
1:57
This lets you create fluid tracts that
expand to fill the available space,
2:01
while not getting any narrower
than the specified min size.
2:05
So setting the max value to 1fr
means that the column won't get any
2:09
narrower than 200 pixels.
2:14
And if the available space allows it,
it's going to expand and
2:16
get in on that free space
with the other two tracks
2:20
Finally, let's say we want three flexible,
equal size,
2:29
column tracks that will not get
any narrower than 200 pixels.
2:33
Well, you can set all three
column tracks using minmax.
2:38
And depending on the number of tracks,
your track list could get messy and
2:43
hard to read.
2:48
This is where the repeat notation you
learned in the previous video comes in
2:48
handy to help you write less code and
keep it maintainable.
2:52
You can set all three flexible column
tracks at once using the repeat function.
2:56
I'll set the track repeat value to 3 and
3:04
track size values to minmax(200 pixels,
and 1fr).
3:08
And this allows the columns to flex
in size ranging from 200 pixels to
3:15
equal width columns that stretch across
the full width of the container.
3:20
So all three columns take
up the available space, but
3:26
never get any narrower than 200 pixels.
3:29
Notice how the grid container begins
3:33
overflowing once it's unable
to fit all the columns.
3:36
Well, at this point, you might use media
queries to force overflowing items
3:40
onto a new row or a certain number of
items per row at different breakpoints.
3:45
Well, wouldn't it be wonderful if we
could let Grid figure out how many column
3:50
tracks can fit inside the available space
and when to wrap them onto a new row?
3:55
Well, Grid actually has a solution for
this.
4:00
In the next video, I'll teach you how
CSS Grid helps you create responsive
4:02
Grid Layouts,
without the use of media queries.
4:06