CSS Grid Layout: The Fr Unit
source link: https://www.digitalocean.com/community/tutorials/css-css-grid-layout-fr-unit
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
// Tutorial //
CSS Grid Layout: The Fr Unit
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.
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;
/* ... */
}
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;
/* ... */
}
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;
}
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK