fr css code example

Example 1: what are the units used in css grid

the units used in css grid are as follows:
  1) fr: sets the column or row to a fraction of the available space.
  2) auto: sets the column or row to the width or height of its content 
            automatically.
  3) %: sets the column or row to the percent width  of its container.

Example 2: css fr

/* 
the fr unit is used in css grid layouts
that translates to "one fraction of the grid"
for example
*/

.grid
{
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
}

/*
Here I want to have 4 rows that are a quarter of the grid each,
to avoid overflow. But what if I happen to add a fifth row? I'd have
to manually set each part to 20%, and that might be uncomfortable. So
a better approach for this would be to use fr
*/

.grid
{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* 
Here if I add another column, the other ones will be automatically resize to
make it fit

I hope I could help you :)
*/