Embedded Files
With CSS Grid Layout, we get a new flexible unit: the Fr unit. Fr is a fractional unit and 1fr is for 1 part of the available space. The following are a few examples of the fr unit at work. The grid items in these examples are placed onto the grid with grid areas.
Example #1
Example #1
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 100px 200px 100px;
grid-template-areas:
"head head2 . side"
"main main2 . side"
"footer footer footer footer";
}
The 4 columns each take up the same amount of space.
Example #2
Example #2
Here’s the same example from above with different fr values. Notice the change in the layout:
.container {
/* ... */
grid-template-columns: 1fr 1fr 40px 20%;
grid-template-rows: 100px 200px 100px;
/* ... */
}
Example #3
Example #3
In this example, the sidebar item covers 2fr, so it’ll be the same width as the items that span the 1st and 2nd columns. Column three remains at 40px.
.container {
/* ... */
grid-template-columns: 1fr 1fr 40px 2fr;
grid-template-rows: 100px 200px 100px;
/* ... */
}
Example #4
Example #4
As you saw in the previous examples, you can mix fr values with fixed and percentage values. The fr values will be divided between the space that’s left after what’s taken by the other values.
For example, if you have a grid with 4 columns as in this example, the 1st column will be 300px, the second 80px (10% of 800px), the 3rd and 4th columns will be 210px (each occupying half of the remaining space):
main {
width: 800px;
display: grid;
grid-template-columns: 300px 10% 1fr 1fr;
/* 300px 80px 210px 210px */
grid-template-rows: auto;
}
This is a basic grid that uses the fraction unit. The layout below divides the space into three equal-width columns and two equal-height rows.
The HTML is made of six div's marked with the .box class, inside a .wrapper div.
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 200px 200px;
grid-gap: 10px;
}
.box {
color: white;
text-align: center;
font-size: 30px;
padding: 25px;
}
<div class="wrapper">
<div class="box box-1">1.</div>
<div class="box box-2">2.</div>
<div class="box box-3">3.</div>
<div class="box box-4">4.</div>
<div class="box box-5">5.</div>
<div class="box box-6">6.</div>
</div>
To use the Grid Layout module, you need to add the display: grid; CSS property to the wrapper. The grid-template-columns property uses the fr unit as value; the ratio of the three columns is 1:1:1.
For the grid rows (grid-template-rows property), I didn’t use the fr unit, as it only makes sense if the wrapper has a fixed height. Otherwise, it can have strange results on some devices, however, even then, the fr unit does maintain the ratio (and this is huge).
The grid-gap property adds a 10px grid in-between the boxes. If you don’t want any gap just remove this property.
Example #6 - Change ratio
Example #6 - Change ratio
Of course, you can’t only use 1:1:1 but any ratio you want. Below, I used 1:2:1 fractions that also divide the space into three columns but the middle column will be twice as wide as the other two.
The value of the grid-gap is increased so that you can see how it changes the layout. Basically, the browser deducts the grid gap from the viewport width (in this example, the grid gaps add up to 80px), and slices up the rest according to the given fractions.
.wrapper {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 200px 200px;
grid-gap: 40px;
}
Example #7 - Combine fr with other CSS units
Example #7 - Combine fr with other CSS units
You can combine the fr unit with any other CSS units as well. For instance, in the example below, a 60% 1fr 2fr ratio is used for the grid.
So, how does this work? The browser assigns the 60% of the viewport width to the first column. Then, it divides the rest of the space into 1:2 fractions.
The same thing could also be written as 60% 13.33333% 26.66667%. But frankly, why would anyone want to use that format? A huge advantage of fraction unit is that it improves code readability. Moreover, it’s completely accurate, as the percentage format still adds up only to 99.9999%.
Apart from percentages, you can also use other CSS units together with the fraction unit, for instance pt, px, em, and rem.
.wrapper {
display: grid;
grid-template-columns: 60% 1fr 2fr;
grid-template-rows: 200px 200px;
grid-gap: 10px;
}
Report abuse