What You Didn’t know about the CSS Fractional Unit
Introduction
The fractional unit (fr) is a new form of unit measurement in CSS — largely associated with the CSS Grid.
If you are not familiar with the CSS Fractional unit(fr), be sure to check out my dead simple introductory article.
What you didn’t know
In the most basic form, the declaration for the fractional unit may look like this:
grid-template-rows: 1fr 1fr 1fr
At the heart of the fractional unit is fractions 1.e the division of the available space in fractions. But is there more than meets the eye?
I love Examples. Who doesn’t?
Consider the image below:
The image represents a typical 2 column layout. A sidebar
on the left, and a main content area on the right. The sidebar
has a fixed width and the main
content area expands to fill the remaining available space.
This simple layout may be written out in a few lines of code. Something along these lines:
grid-template-columns: 150px 1fr;
The 150px
represents the fixed width of the sidebar
and 1fr
allows for the main
content section to fill the remaining available space.
Thanks to the CSS Grid and fr
unit, that is done.
Assume that the overall container of the grid container had a minimum width. Do you think that would affect the layout in any way?
Think for a bit. I’ll wait.
In terms of code, here is what I mean. Where .grid
represent a grid container:
.grid {
min-width: 400px;
}
The simple answer to my question is a resounding ‘Yes!. But how exactly is the layout affected?
1. The
fr
unit fills up the available space BUT it is NEVER smaller than the minimum size of the grid container
In a more visual form, here it is:
As the page is being resized, the fr
unit will always fill the remaining available screen — hence, responsive. However it will never be lesser than the minimum width of the container.
In the example above, the main
section will keep being responsive UNTIL it reaches a width of 400p
,the min-width
of the grid container. At this point, the main
section remains fixed. Not responsive.
Now, this does not end with setting a minimum width.
This has covered one scenario. Let’s see another.
What if an image was added within the main
section?
<main>
<img src="some-image.png"/>
</main>
Could this have any effect on the layout?
Well it depends. This leads to the second point.
2. The fr unit fills up the available space BUT it is NEVER smaller than the content of the row or column
Adding an image within the main section, you get this:
When you resize the page, the main
section will NOT go below the set width of the image.
The width of the image in this example is about 430px
. You may see this in action below:
As shown in the image above, the main
section declared with 1fr
never goes below the of the content of the row. The image above shows the horizontal scrollbars. The bars are present in a bid to accomodate the fixed main
section.
This is beautiful. Later in the article I talk about how all this knowledge is useful.
However, there’s one more scenario to look at.
What if there’s a conflict in declaration?
What if for some reason you have a min-width
set on the grid container, and yet have some content in the row?
.grid {
min-width: 400px;
}.grid img {
width: 600px;
}
3. In the case of a conflict, the fr unit is NEVER smaller than than the maximum of the container’s minimum width or the row/column content size.
In the example above, even though the grid container has a minimum width of 400px
the main
section will never be smaller than the width of the image, 600px
I have created a codepen for which you may interact with all the points stated here: https://codepen.io/ohansemmanuel/pen/XgyGVE
How can this knowledge profit you?
1. Knowing the Fundamentals
At the time of this writing, the CSS Grid layout is relatively new. By implication, if you get stuck while using the CSS Grid, there may NOT be sufficient stackoverflow answers to run to :-)
Understanding how things work under the hood saves you a lot of wasted debugging time.
2. Bloated Code
In cases where you may have had to explicitly use the minmax
function, you may need to rethink if it is necessary. The fr
unit can pick out minimums intuitively. At least, you now know how that works now.
3. Weird Horizontal scrollers
If you have weird horizontal scrollers where you expect the grid to be responsive, check what’s going on with the fr
declarations. You may have a fix here.
Want to become Pro?
Download my free CSS Grid cheat sheet, and also get two quality interactive Flexbox courses for free!