Flexible Track Sizing with minmax()4:09 with Guil Hernandez
One of the most useful features in Grid Layout is the
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 uPort 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 up