Guide to CSS Grid Layout Fr Unit

The CSS Grid Layout Module was shipped with a new CSS unit called a fr unit. As candid as it can be, fr is a abbreviation of a word “fraction”. The new section creates it probable to fast cut a grid adult into proportional columns or rows. As a result, a origination of fully manageable and stretchable grids becomes roughly a breeze.

Introduction to a CSS Grid Layout Module

Introduction to a CSS Grid Layout Module

It was once tables, afterwards margins and floats, afterwards flexbox and now grid: CSS always directed towards new…Read more

As a fragment section was introduced together with a Grid Layout module, we can use it in any browser that supports a CSS grid. If we also wish to support comparison browsers here’s a good CSS grid polyfill that allows we to use not usually a fr section though other grid facilities as well.

CanIUse Grid LayoutCanIUse Grid Layout

Basic usage

First, let’s have a demeanour during a basic grid that uses a fragment unit. The blueprint next divides a space into three equal-width columns and two equal-height rows.

Basic usageBasic usage

The belonging HTML is done of six divs noted with a .box class, inside a .wrapper div.

div class="wrapper"
  div class="box box-1"1./div
  div class="box box-2"2./div
  div class="box box-3"3./div
  div class="box box-4"4./div
  div class="box box-5"5./div
  div class="box box-6"6./div
/div

To use a Grid Layout module, we need to supplement a display: grid; CSS skill to a wrapper. The grid-template-columns skill uses a fr section as value; a ratio of a 3 columns is 1:1:1.

For a grid rows (grid-template-rows property), we didn’t use a fr unit, as it usually creates clarity if a coupling has a bound height. Otherwise, it can have bizarre formula on some devices, however, even then, a fr section does say a ratio (and this is huge).

The grid-gap skill adds a 10px grid in-between a boxes. If we don’t wish any opening usually mislay this property.

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 200px 200px;
  grid-gap: 10px;
}
.box {
  color: white;
  text-align: center;
  font-size: 30px;
  padding: 25px;
}

Note a CSS above doesn’t enclose some elementary styling such as credentials colors. You can find a full formula in a demo during a finish of a article.

Change ratio

Of course, we can’t usually use 1:1:1 though any ratio we want. Below, we used 1:2:1 fractions that also order a space into three columns though a center mainstay will be twice as wide as a other two.

Change ratioChange ratio

I also increasing a value of grid-gap so that we can see how it changes a layout. Basically, a browser deducts a grid opening from a viewport width (in this example, a grid gaps supplement adult to 80px), and slices adult a rest according to a 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 combine a fr section with any other CSS units as well. For instance, in a instance below, we used a 60% 1fr 2fr ratio for my grid.

Combine unitsCombine units

So, how does this work? The browser assigns a 60% of a viewport width to a initial column. Then, it divides a rest of a space into 1:2 fractions.

The same thing could also be created as 60% 13.33333% 26.66667%. But frankly, because would anyone wish to use that format? A outrageous advantage of fragment section is that it improves formula readability. Moreover, it’s completely accurate, as a commission format still adds adult usually 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 together with a fragment unit, for instance pt, px, em, and rem.

Add whitespace with fr

What if we don’t wish your pattern to be cluttered and add some whitespace to your grid? The fragment section also has an easy resolution for that.

Add whitespaceAdd whitespace

As we can see, this grid has an dull column while it still retains all a 6 boxes. For this layout, we need to cut a space adult into 4 columns instead of three. So, we use a 1fr 1fr 1fr 1fr value for a grid-template-columns property.

We supplement a dull mainstay inside a grid-template-areas property, regulating a dot notation. Basically, this skill allows we to reference named grid areas. And, we can name grid areas with a grid-area skill that we need to use separately for any 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 don’t indispensably have to form a column, they can be anywhere in a grid.

The repeat() function

You can also use a fr section together with a repeat() function for a simpler syntax. , this is not required if we usually have a elementary grid though can come in accessible when we wish to implement a difficult layout, for instance a 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 a same layout as 1fr 1fr 1fr. The blueprint next is a same as a initial example.

Basic usageBasic usage

If we increase a multiplier inside a repeat() duty we will have some-more columns. For instance, repeat(6, 1fr) formula in six equal columns. In this case, all a boxes will be in a same row, that means it’s adequate to use usually one value (200px) for a grid-template-rows property.

.wrapper {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 200px;
  grid-gap: 10px;
}
Repeat() functionRepeat() function

You can use repeat() more than once. For instance, a following instance formula in a grid in that a final 3 columns are twice as wide as a initial three.

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
  grid-template-rows: 200px;
  grid-gap: 10px;
}
Repeat() function, used twiceRepeat() function, used twice

You can also combine repeat() with other CSS units. For instance, we could use 200px repeat(4, 1fr) 200px as a current code.

If we are meddlesome in how to create formidable layouts with a CSS Grid module, a repeat() duty and a fr section Rachel Andrew has an engaging blog post on how we can do that.

A demo for experimenting

Finally, here’s a demo we promised. It uses a same formula as a initial instance in this article. Fork it, and see what we can grasp with a fr unit.

Integrating Simple CSS Grid Layouts into WordPress

Integrating Simple CSS Grid Layouts into WordPress

Getting a consistent, plain grid blueprint into WordPress can be a painless routine if we use a right…Read more

Add Comment