Introducing fr, a Flexible CSS Length Unit

CSS Grid Layout introduces new features that adapt content to available space and 0:04 intelligently size and position items within a grid container. 0:09 This supports responsive design and makes it easier 0:13 to create layouts that work in a variety of different browser sizes. 0:16 One of the grid length values you'll use most is the fr or fraction unit. 0:20 A flexible length unit designed for creating grid tracks that expand and 0:25 contract based on the free space in the grid. 0:29 In the grid container rule, let's set the middle column track back to 200 pixels. 0:33 And once again, our grid layout consists of three fixed columns, 0:39 each 200 pixels wide. 0:43 So now we're seeing all of this extra white space left over to the right of 0:44 the columns, and if I increase the max width of the grid container 0:48 to 1000 pixels, that gap gets wider. 0:52 So the grid is not flexible by default. 0:55 Well, you learn that the value auto can expand a column to fill up extra space, 0:58 well, auto sizes thing based on content. 1:04 So it doesn't give you total control over how much space an item takes up. 1:07 What if you need to set exactly how much free space an item takes up? 1:11 So for instance, assign a small amount of free space to one column and 1:15 a larger amount to another. 1:19 CSS Grid can intelligently control the fluidity or responsiveness of your layout. 1:21 So this means you can set items to automatically wrap and 1:27 adjust to fit their container's width. 1:29 Which as you'll learn, 1:32 makes it possible to create flexible grid layouts without media queries. 1:33 So let's make the grid flexible using the fr unit. 1:37 Now, one fr represents one fraction of the available space in the grid container. 1:41 And if you set any of the column track values to one fr, for example, 1:47 the middle column, it expands to fill up that extra space. 1:52 The middle column is now flexible while the first and 1:57 last columns are fixed at 200 pixels. 2:00 And the free space that an fr takes up is calculated after any non flexible tracks. 2:03 So for instance, in this track list, the total amount of free space available 2:10 to 1fr does not include the space occupied by each of 2:16 the 200 pixel column tracks, including the space assigned to all gutters. 2:20 So setting another track size to 1fr 2:25 means that the flexible values are divided between the space that's left over 2:30 after the 200 pixels taken by the third track and the gutter values. 2:35 As you can see, the fr unit removes the need for math. 2:40 You can create flexible grids without having to do any of the percentage 2:43 calculations usually required when creating fluid columns. 2:47 For example, if you're creating a fluid three-column layout with percentages, 2:51 you need to make sure that all columns add up to 100%. 2:56 So you'll do the math, and use values like 33.33% for all columns. 3:00 And if you want gutters, you'll also need to factor in the gutter sizes. 3:07 Well, with Grid, making all three column tracks flexible, and 3:11 have each take up a portion of the free space is simple. 3:15 You can do it in a more declarative way using the fr unit. 3:18 So I'll change the track list to one fr, one fr, one fr, and 3:23 just like that, we have three flexible equal with columns. 3:29 Each item is set to one third of the width of the grid container. 3:33 And you can assign more space to one by giving it a larger fr value. 3:38 If you set the middle track to 2fr, 3:43 the space is split up by giving one part, or fraction of the free space, 3:47 to the first and third column tracks and two parts to the middle track. 3:53 Also, any space taken up by gutters will be accounted for 3:59 before space is assigned to the flexible fr tracks. 4:02 So for example, if you increase the grid gap to a larger value, like 40 pixels, 4:06 The gutters become wider and the columns narrower, but they still remain flexible. 4:14 Grid does all the calculations for you. 4:20 All right, so in the next video, 4:24 you'll learn how to write your track lists in a more compact way. 4:26