The Art of Writing Short Stories Read Here

fr Relative Unit


fr Relative Unit

The CSS grid relative sizing unit fr is used to split rows and/or columns into proportional distances. Each fr unit is a fraction of the grid’s overall length and width. If a fixed unit is used along with fr (like pixels for example), then the fr units will only be proportional to the distance left over.

In this example, the second column take 60px of the avaiable 100px so the first and third columns split the remaining available 40px into two parts (`1fr` = 50% or 20px)

.grid {
  display: grid;
  width: 100px;
  grid-template-columns: 1fr 60px 1fr;

You may also like :