Repeat Tracks with auto-fill and auto-fit7:23 with Guil Hernandez
Grid 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-fit -- to help with this.
Grid layout lets you set items to automatically wrap and 0:00 adjust to fit their containers 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 savvy min size of 200 pixels and a max of [INAUDIBLE]. 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 degenerate 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, and 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
You need to sign up for Treehouse in order to download course files.Sign up