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 1frAt 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
frunit 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!
