Guide: CSS Grid Layout Fr Unit: Quick Guide
The CSS grid layout module was shipped with a new CSS unit called the fr unitAs simple as it can be, fr is the short for the word “fracture”The new unit makes it possible to cut the grid quickly up in proportional columns or rows. As a result, the creation of fully responsive and flexible grids becomes almost a breeze. Since the fraction unit was introduced along with the Grid Layout module, you can use it in any browser supports the CSS gridIf you want to support older browsers as well, this is a great option CSS raster polyfill which allows you to use not only the fr unit but also another grid features also.
Basic usage
First, let’s take a look at one basic grid using the fraction unit. The layout below divides the space three columns of equal width and two rows of equal height
The corresponding HTML is made from six divs marked with the .box class, in a .wrapper div
I’ve also increased the grid-gap value so you can see how it changes the layout. In short, the browser subtracts the grid opening from the viewport width (in this example the grid gaps up up to 80px), and slices up the rest according to the given fractions. .wrapper {display: grid; grid-template-columns: 1fr 2fr 1fr; grid template rows: 200px 200px; grid-gap: 40px;}
Combine fr with other CSS units
You can to combine the fr unit with all other CSS units also. For example, in the example below, I used the 60% 1fr 2fr ratio for my grid.
So how does this work? The browser allocates the 60% of the viewport width to the first column. Then it divides the rest of the space into 1: 2 fractions. The same can also be written as 60% 13.33333% 26.66667%. But honestly, why would anyone want to use that format? A big advantage of fraction unit is that it improves the readability of the codeMoreover, it is completely accurate, as the percentage format still adds up only up to 99.9999%. .wrapper {display: grid; grid-template-columns: 60% 1fr 2fr; grid template rows: 200px 200px; grid-gap: 10px;} Apart from percentages, you can also use other CSS units along with the fraction unit, for example pt, px, em, and rem.
Add white space with fr
What if you don’t want your design to be messy and add some white space to you just? The fraction unit has an easy solution for that too.
As you can see, this is grid has an empty column while still containing all six boxes. For this layout we have to divide the space up in four columns instead of three. So we use the value of 1fr 1fr 1fr 1fr for the grid-template-columns property. We add the empty column to the grid-template areas property, using the dot notationIn short, this property allows you reference called grid areasAnd you can name grid areas with the grid area property you must use separately for each area .wrapper {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid template rows: 200px 200px; grid-gap: 10px; grid-template-areas: “box-1 box-2. box-3 “” box-4 box-5. box-6 ”;}. box-1 {grid-area: box-1;}. box-2 {grid-area: box-2;}. box-3 {grid-area: box-3;}. box -4 {grid-area: box-4;}. Box-5 {grid-area: box-5;}. Box-6 {grid-area: box-6;} The whitespace areas do not necessarily have to form a column, they can be anywhere in the grid.
The repeat () function
You can also use the fr unit along with the repeat () function for a simpler syntax, This is not necessary if you only have a simple schedule, but it can be useful if you want implement a complicated layout, For example, an nested grid .wrapper {display: grid; grid-template-columns: repeat (3, 1fr); / * grid-template-columns: 1fr 1fr 1fr; * / grid-template rows: 200px; grid-gap: 10px;} The repeat (3, 1fr) syntax results in the same layout as 1fr 1fr 1fr. The layout below is the same as the first example.
like you increase the multiplier within the function repeat () you have more columns. For example, repeat (6, 1fr) results in six equal columnsIn this case all our boxes will be in the same row, which means that it is enough to use only one value (200px) for the grid-template-rows property. .wrapper {display: grid; grid-template columns: repeat (6, 1fr); grid template rows: 200px; grid-gap: 10px;}
You can use repeat () several timesFor example, the following example results in a grid containing the last three columns twice as wide like the first three. .wrapper {display: grid; grid-template columns: repeat (3, 1fr) repeat (3, 2fr); grid template rows: 200px; grid-gap: 10px;}
You can also combine repeat () with other CSS unitsFor example, you can use 200px repeat (4, 1fr) 200px as the valid code. If you are interested in how to create complex layouts with the CSS Grid module, the repeat () function and the fr unit, Rachel Andrew has an interesting blog post on how to do that.
A demo to experiment
And last but not least, here is the demo i promisedIt uses the same code as the first example in this article. Fork it and see what you can achieve with the fr unit. See the Pen Starter demo for fr units and CSS grid by Compsmag (@hkdc) on CodePen.
CSS Grid Layout Fr Unit: Quick Guide: benefits
Faq
Final note
I hope you like the guide CSS Grid Layout Fr Unit: Quick Guide. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends. For our visitors: If you have any queries regards the CSS Grid Layout Fr Unit: Quick Guide, then please ask us through the comment section below or directly contact us. Education: This guide or tutorial is just for educational purposes. Misinformation: If you want to correct any misinformation about the guide “CSS Grid Layout Fr Unit: Quick Guide”, then kindly contact us. Want to add an alternate method: If anyone wants to add more methods to the guide CSS Grid Layout Fr Unit: Quick Guide, then kindly contact us. Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off). Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.
