Table of Contents
Introduction
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.
.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.
<div class="grid-wrap"><div class="item item-1">Head</div><div class="item item-1-2">Head 2</div><div class="item item-2">Main</div><div class="item item-2-2">Main 2</div><div class="item item-3">Side</div><div class="item item-4">Footer</div><style> .grid-wrap { max-width: 100%; margin: 3em auto; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 50px 150px 50px; grid-template-areas: "head head2 . side" "main main2 . side" "footer footer footer footer"; } .item { border-radius: 3px; margin: 2px; color: white; text-transform: uppercase; display: flex; justify-content: center; align-items: center; } .item-1 { grid-area: head; background: HSLA(162, 76%, 32%, 1.00); } .item-1-2 { grid-area: head2; background: HSLA(162, 76%, 32%, 1.00); } .item-2 { grid-area: main; background: HSLA(162, 76%, 32%, 0.7); } .item-2-2 { grid-area: main2; background: HSLA(162, 76%, 32%, 0.7); } .item-3 { grid-area: side; background: HSLA(162, 76%, 32%, 0.4); } .item-4 { grid-area: footer; background: #0A3442; }</style></div>
Examples using fr
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;
/* ... */
}
<div class="grid-wrap grid2"><div class="item item-1">Head</div><div class="item item-1-2">Head 2</div><div class="item item-2">Main</div><div class="item item-2-2">Main 2</div><div class="item item-3">Side</div><div class="item item-4">Footer</div><style> .grid2 { grid-template-columns: 1fr 1fr 40px 20%; }</style></div>
In the following last example, the sidebar item covers 2fr, so it'll be the same width as the items that span the 1st and 2nd columns:
.container {
/* ... */
grid-template-columns: 1fr 1fr 40px 2fr;
grid-template-rows: 100px 200px 100px;
/* ... */
}
<div class="grid-wrap grid3"><div class="item item-1">Head</div><div class="item item-1-2">Head 2</div><div class="item item-2">Main</div><div class="item item-2-2">Main 2</div><div class="item item-3">Side</div><div class="item item-4">Footer</div><style> .grid3 { grid-template-columns: 1fr 1fr 40px 2fr; }</style></div>
Mixed Units
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 the following snippet, 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;
}
