Determine CSS Grid Sizing with the Fraction Unit (fr)
There are quite a few ways that we can set the width and height of our grid. To name a few, we have pixels (px), percentages, and fractional units (fr).
We'll start by setting our column width with percentages to see how we have really fine-grain control of each column width. We run into a couple of problems though. We have to do all the math ourselves. The more columns you have the more percentages you have to add up to 100. That's not fun. 😂 On top of that, percentages don't include the grid-gap spacing that you set! You'll have to figure that one out yourself.
This is where fr units come into play. The browser takes in the values you explicitly set, (e.g. percentages, pixels) and then splits the remaining space into fractional units (fr) automatically.
You'll see how to mix percentages with fr units to make your grid look exactly how you'd like it.
Lesson Challenge
Use your own words (maybe in a blog post? 😉 ) to explain why fr is the best option for grid.
Instructor: [0:00] While we've been using pixels to set the column width and row height of the grid items, you have a few options, like pixels, percents, em, and fractions units. Let's go over three of the most common ways to set height and width -- percents, pixels, and fractions, or fr.
[0:16] You can set grid heights and widths by setting percentages. This seems to make a lot of sense. Let's give it a try. Here, I have grid-template-columns with four columns at 25% 25% 25% 25% and grid-template-rows: 150px 250px 100px. Now, let's take a look in the browser.
[0:37] Wait. What seems to be happening here? It's bleeding off, and it's definitely not responsive. I can try stretching the page, but even when I do, it's still bleeding off to the edge. What's going on? 25% + 25% + 25% + 25% = 100%, right? This is happening because the 25% isn't taking into account the grid gaps.
[1:02] There are 20px grid gaps between each grid, which is why when you add it up, it gets to more than 100%, which means that the grids are going to bleed off the page. Let's cancel out the grid gap for the columns and see what happens. Boom. Now the grids fit into the browser, and it is also responsive. However, we want the grid gaps.
[1:27] Another option we have is to use pixels. However, while this gives us an absolute way to set height and width, it's not very responsive, and doesn't look very good when elements start bleeding off the page or get stuck at the corner because someone has a gigantic monitor.
[1:43] Let's take a look at this. Wow. 400px, 200px, 500px, and 400px for the columns. It's definitely not responsive and easily bleeds off the page. To solve both of these issues, we can utilize fractions or fr.
[1:59] Using fraction units is the way for you to get the browser to do the math. It calculates all the space that's already being taken up by other manually set values like pixels and percentages, and then allocates a fraction of the free space remaining to the grid.
[2:14] We can of course mix and match the different types of grid sizing. Let's change the grid-template-columns to 50 percent for the first grid and then the rest into fractions. The first 50 percent of browser screen should be taken up by the first grid and the rest of the columns will all share the remaining screen space evenly.
[2:31] Doesn't that look great and responsive? The first column is taking up 50 percent of the screen. Then, the rest of the columns are sharing the remaining space.
[2:43] Fractional space can be different numbers. Let's change one of the grids to take up 2fr. As you can see, the first grid column takes up 50 percent of the screen. Then, the second grid column takes up 1 fractional unit, as does the fourth. The third takes up 2 fractional units.
[2:58] As you can see, by mixing and matching and utilizing fr, you can make your CSS Grid responsive and fit nicely into your browser screen.