{"id":30039,"date":"2017-05-22T23:01:21","date_gmt":"2017-05-22T15:01:21","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=30039"},"modified":"2025-04-04T00:02:06","modified_gmt":"2025-04-03T16:02:06","slug":"css-grid-layout-fr-unit","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-grid-layout-fr-unit\/","title":{"rendered":"Guide to CSS Grid Layout Fr Unit"},"content":{"rendered":"

The CSS Grid Layout Module<\/a><\/strong> was shipped with a new CSS unit<\/strong> called the fr<\/code> unit<\/strong>. As straightforward as it can be, fr<\/code> is the abbreviation of the word \u201cfraction\u201d<\/strong>. The new unit makes it possible to quickly slice the grid up into proportional columns or rows. As a result, the creation of fully responsive and flexible grids<\/strong> becomes almost a breeze.<\/p>\n

As the fraction unit was introduced together with the Grid Layout module, you can use it in any browser that supports the CSS grid<\/a><\/strong>. If you also want to support older browsers here\u2019s a great CSS grid polyfill<\/a><\/strong> that allows you to use not only the fr<\/code> unit but other grid features as well.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tIntroduction to the CSS Grid Layout Module<\/a>\n\t\t\t\t<\/p>\n

\"CanIUse<\/a><\/figure>\n

Basic usage<\/h2>\n

First, let\u2019s have a look at a basic grid<\/strong> that uses the fraction unit. The layout below divides the space into three equal-width columns<\/strong> and two equal-height rows<\/strong>.<\/p>\n

\"Basic<\/figure>\n

The belonging HTML is made of six divs<\/strong> marked with the .box<\/code> class, inside a .wrapper<\/code> div<\/strong>.<\/p>\n

\r\n<div class=\"wrapper\">\r\n  <div class=\"box box-1\">1.<\/div>\r\n  <div class=\"box box-2\">2.<\/div>\r\n  <div class=\"box box-3\">3.<\/div>\r\n  <div class=\"box box-4\">4.<\/div>\r\n  <div class=\"box box-5\">5.<\/div>\r\n  <div class=\"box box-6\">6.<\/div>\r\n<\/div>\r\n<\/pre>\n
To use the Grid Layout module, you need to add the display: grid;<\/code> CSS property to the wrapper. The grid-template-columns<\/code> property uses the fr<\/code> unit as value; the ratio of the three columns is 1:1:1<\/strong>.<\/p>\n
For the grid rows (grid-template-rows<\/code> property), I didn\u2019t use the fr<\/code> unit, as it only makes sense if the wrapper has a fixed height<\/strong>. Otherwise, it can have strange results on some devices, however, even then, the fr<\/code> unit does maintain the ratio<\/strong> (and this is huge).<\/p>\n
The grid-gap<\/code> property adds a 10px grid<\/strong> in-between the boxes. If you don\u2019t want any gap just remove this property.<\/p>\n
\r\n.wrapper {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr 1fr;\r\n  grid-template-rows: 200px 200px;\r\n  grid-gap: 10px;\r\n}\r\n.box {\r\n  color: white;\r\n  text-align: center;\r\n  font-size: 30px;\r\n  padding: 25px;\r\n}\r\n<\/pre>\n
Note the CSS above doesn\u2019t contain some basic styling such as background colors. You can find the full code in the demo at the end of the article<\/strong>.<\/p>\n
Change ratio<\/h2>\n
Of course, you can\u2019t only use 1:1:1 but any ratio you want<\/strong>. Below, I used 1:2:1 fractions<\/strong> that also divide the space into three columns<\/strong> but the middle column will be twice as wide<\/strong> as the other two.<\/p>\n
\"Change<\/figure>\n
I also increased the value of grid-gap<\/code> so that you can see how it changes the layout. Basically, the browser deducts the grid gap from the viewport width<\/strong> (in this example, the grid gaps add up to 80px), and slices up the rest<\/strong> according to the given fractions.<\/p>\n
\r\n.wrapper {\r\n  display: grid;\r\n  grid-template-columns: 1fr 2fr 1fr;\r\n  grid-template-rows: 200px 200px;\r\n  grid-gap: 40px;\r\n}\r\n<\/pre>\n
Combine fr<\/code> with other CSS units<\/h2>\n
You can combine<\/strong> the fr<\/code> unit with any other CSS units<\/strong> as well. For instance, in the example below, I used the 60% 1fr 2fr<\/code> ratio for my grid.<\/p>\n
\"Combine<\/figure>\n
So, how does this work? The browser assigns the 60% of the viewport width<\/strong> to the first column. Then, it divides the rest of the space into 1:2 fractions.<\/p>\n
The same thing could also be written as 60% 13.33333% 26.66667%<\/code>. But frankly, why would anyone want to use that format? A huge advantage of fraction unit is that it improves code readability<\/strong>. Moreover, it\u2019s completely accurate<\/strong>, as the percentage format still adds up only to 99.9999%.<\/p>\n
\r\n.wrapper {\r\n  display: grid;\r\n  grid-template-columns: 60% 1fr 2fr;\r\n  grid-template-rows: 200px 200px;\r\n  grid-gap: 10px;\r\n}\r\n<\/pre>\n
Apart from percentages, you can also use other CSS units<\/a><\/strong> together with the fraction unit, for instance pt<\/code>, px<\/code>, em<\/code>, and rem<\/code>.<\/p>\n
Add whitespace with fr<\/code><\/h2>\n
What if you don\u2019t want your design to be cluttered and add some whitespace<\/strong> to your grid? The fraction unit also has an easy solution for that.<\/p>\n
\"Add<\/figure>\n
As you can see, this grid has an empty column<\/strong> while it still retains all the six boxes. For this layout, we need to slice the space up into four columns<\/strong> instead of three. So, we use the 1fr 1fr 1fr 1fr<\/code> value for the grid-template-columns<\/code> property.<\/p>\n
We add the empty column inside the grid-template-areas<\/code><\/a><\/strong> property, using the dot notation<\/strong>. Basically, this property allows you to reference named grid areas<\/strong>. And, you can name grid areas with the grid-area<\/code><\/a><\/strong> property that you need to use separately for each area<\/strong>.<\/p>\n
\r\n.wrapper {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr 1fr 1fr;\r\n  grid-template-rows: 200px 200px;\r\n  grid-gap: 10px;\r\n  grid-template-areas:\r\n    \"box-1 box-2 . box-3\"\r\n    \"box-4 box-5 . box-6\";\r\n}\r\n.box-1 {\r\n  grid-area: box-1;\r\n}\r\n.box-2 {\r\n  grid-area: box-2;\r\n}\r\n.box-3 {\r\n  grid-area: box-3;\r\n}\r\n.box-4 {\r\n  grid-area: box-4;\r\n}\r\n.box-5 {\r\n  grid-area: box-5;\r\n}\r\n.box-6 {\r\n grid-area: box-6;\r\n}\r\n<\/pre>\n
The whitespace areas don\u2019t necessarily have to form a column<\/strong>, they can be anywhere<\/strong> in the grid.<\/p>\n
The repeat()<\/code> function<\/h2>\n
You can also use the fr<\/code> unit together with the repeat()<\/code><\/a> function<\/strong> for a simpler syntax<\/strong>. , this is not necessary if you only have a simple grid but can come in handy when you want to implement a complicated layout<\/strong>, for instance a nested grid<\/strong>.<\/p>\n
\r\n.wrapper {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  \/* grid-template-columns: 1fr 1fr 1fr; *\/\r\n  grid-template-rows: 200px;\r\n  grid-gap: 10px;\r\n}\r\n<\/pre>\n
The repeat(3, 1fr)<\/code> syntax results in the same layout<\/strong> as 1fr 1fr 1fr<\/code>. The layout below is the same as the first example.<\/p>\n
\"Basic<\/figure>\n
If you increase the multiplier<\/strong> inside the repeat()<\/code> function you will have more columns. For instance, repeat(6, 1fr)<\/code> results in six equal columns<\/strong>. In this case, all our boxes will be in the same row<\/strong>, which means it\u2019s enough to use only one value (200px) for the grid-template-rows<\/code> property.<\/p>\n
\r\n.wrapper {\r\n  display: grid;\r\n  grid-template-columns: repeat(6, 1fr);\r\n  grid-template-rows: 200px;\r\n  grid-gap: 10px;\r\n}\r\n<\/pre>\n
\"Repeat()<\/figure>\n
You can use repeat()<\/code> more than once<\/strong>. For instance, the following example results in a grid in which the last three columns are twice as wide<\/strong> as the first three.<\/p>\n
\r\n.wrapper {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);\r\n  grid-template-rows: 200px;\r\n  grid-gap: 10px;\r\n}\r\n<\/pre>\n
\"Repeat()<\/figure>\n
You can also combine repeat()<\/code> with other CSS units<\/strong>. For instance, you could use 200px repeat(4, 1fr) 200px<\/code> as a valid code.<\/p>\n
If you are interested in how to create complex layouts<\/strong> with the CSS Grid module, the repeat()<\/code> function and the fr<\/code> unit Rachel Andrew has an interesting blog post on how you can do that<\/a>.<\/p>\n
A demo for experimenting<\/h2>\n
Finally, here\u2019s the demo I promised<\/strong>. It uses the same code as the first example in this article. Fork it, and see what you can achieve with the fr<\/code> unit.<\/p>\n