Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed CSS Grid Layout!
You have completed CSS Grid Layout!
Preview
One of the most useful features in Grid Layout is the minmax() function. minmax() lets you set a grid track's minimum and maximum size.
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
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
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