CSS Grid Layout Fr Unit: Quick Guide

Use grid layout

Hello friends today we gonna learn about CSS Grid Layout Fr Unit: Quick Guide. So read this article, CSS Grid Layout Fr Unit: Quick Guide step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

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.

back to menu ↑

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

Basic usage

The corresponding HTML is made from six divs marked with the .box class, in a .wrapper div

back to menu ↑

Change the ratio

You can of course not only use 1: 1: 1, but any ratio you wantBelow I used 1: 2: 1 fractions which also divide the space into three columns but the middle column will be twice as wide like the other two.

Change the ratio

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;}

back to menu ↑

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.

Combine units

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.

back to menu ↑

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.

Add white space

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.

back to menu ↑

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.

Basic usage

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;}

Repeat () function

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;}

Repeat () function, used twice

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.

back to menu ↑

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.

back to menu ↑

CSS Grid Layout Fr Unit: Quick Guide: benefits

  • The CSS Grid Layout Fr Unit: Quick Guide tutorial is free .
  • This guide already helps so many users follow up with interest in a timely manner.
  • The price of the CSS Grid Layout Fr Unit: Quick Guide guide is free.

back to menu ↑


Tutorial summary of CSS Grid Layout Fr Unit: Quick Guide

In this guide, we told you about the CSS Grid Layout Fr Unit: Quick Guide; please read all steps so that you understand CSS Grid Layout Fr Unit: Quick Guide in case if you need any assistance from us, then contact us.

How this tutorial helping you?

So in this guide, we discuss the CSS Grid Layout Fr Unit: Quick Guide, which undoubtedly helps you.

What is actual time in which this method complete?

The time to complete the CSS Grid Layout Fr Unit: Quick Guide tutorial is 10+ minutes.

What are the supported Device?

PC Laptop or Desktop

back to menu ↑

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.

Shopping cart