CSS Grid Layout: The Fr Unit

The CSS Grid Layout module is used to create a grid-based layout system, with the help of rows and columns it makes easier to design any webpage without using floats and positioning.

Syntax:

.class {
    display:grid;
}

Note: An HTML element becomes a grid if that element sets display:grid

  • grid-template-columns : This specifies the size of the columns
  • grid-template-rows : Specifies the size of the rows.
  • grid-gap : sets the gaps between rows and columns.

Some grid-template-columns keyword value:

  • grid-template-columns: repeat( [ <positive-integer> | auto-fill | auto-fit ], <track-list> );
  • grid-template-rows: repeat( [ <positive-integer> | auto-fill | auto-fit ], <track-list> );

Represents a repeated fragment of the tracklist, allowing a large number of columns that exhibit a recurring
pattern to be written in a more compact form. It allows you to define a pattern repeated X times.



  • grid-template-columns: auto
  • grid-template-rows: auto;

Indicates auto-placement, an automatic span, or a default span of one Column is fitted to the content in the column. The row is fitted to the content in the row.

  • grid-template-columns: minmax(min, max);
  • grid-template-rows: minmax(min, max);

Is a functional notation that defines a size range greater than or equal to min and less than or equal to max

    The CSS Grid Layout module introduces a new flexible unit of length called fr.

  • The Fr Unit : Fr is a fractional unit.
  • The Fr unit is an input that automatically calculates layout divisions when adjusting for gaps inside the grid.

Example 1.This example illustrates the use of fr unit.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style>
        .container {
            display: grid;
  
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-template-rows: 100px;
            grid-gap: 10px;
        }
  
  
        .container div {
            border: 3px black;
            border-radius: 7px;
            background-color: yellowgreen;
            padding: 1em;
            text-align: center;
            color: darkgreen;
        }
  
        h1 {
            color: green;
            text-align: center;
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <div class="container">
        <div>geeksforgeeks 1</div>
        <div>geeksforgeeks 2</div>
        <div>geeksforgeeks 3</div>
        <div>geeksforgeeks 4</div>
    </div>
</body>
  
  
</html>

chevron_right


We have 4 columns each take up the same amount of space. Each has a width of 1fr. Each column is equal. 1fr=25% of the available space.

Example 2. This example illustrates the use of fr unit with different fractional values.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
  <style>
    .container {
      display: grid;
  
      grid-template-columns: 1fr 1fr 2fr 2fr;
      grid-template-rows: 100px 150px 200px 200px;
  
      grid-gap: 10px;
    }
  
  
  
    .container div {
      border: 3px black;
      border-radius: 7px;
      background-color: yellowgreen;
      padding: 1em;
      text-align: center;
      color: darkgreen;
    }
  
    h1 {
      color: green;
      text-align: center;
  </style>
</head>
  
<body>
  <h1>GeeksforGeeks</h1>
  <div class="container">
    <div>geeksforgeeks 1</div>
    <div>geeksforgeeks 2</div>
    <div>geeksforgeeks 3</div>
    <div>geeksforgeeks 4</div>
    <div>geeksforgeeks 5</div>
    <div>geeksforgeeks 6</div>
    <div>geeksforgeeks 7</div>
    <div>geeksforgeeks 8</div>
    <div>geeksforgeeks 9</div>
    <div>geeksforgeeks 10</div>
    <div>geeksforgeeks 11</div>
    <div>geeksforgeeks 12</div>
    <div>geeksforgeeks 13</div>
    <div>geeksforgeeks 14</div>
    <div>geeksforgeeks 15</div>
    <div>geeksforgeeks 16</div>
  </div>
</body>
  
  
</html>

chevron_right


We have 4 columns, the first two columns take up the same amount of space i.e. 1fr and the last two columns take up the same amount of space i.e. 2fr.

Example 2. This example illustrates the use of fr unit with repeat() and auto notation.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
  <style>
    .container {
      display: grid;
  
      grid-template-columns: repeat(2, 1fr) repeat(2, 2fr);
      grid-template-rows: auto;
  
      grid-gap: 10px;
    }
  
  
  
    .container div {
      border: 3px black;
      border-radius: 7px;
      background-color: yellowgreen;
      padding: 1em;
      text-align: center;
      color: darkgreen;
    }
  
  
    /* Designing h1 element */
    h1 {
      color: green;
      text-align: center;
  </style>
</head>
  
<body>
  <h1>GeeksforGeeks</h1>
  <div class="container">
    <div>geeksforgeeks 1</div>
    <div>geeksforgeeks 2</div>
    <div>geeksforgeeks 3</div>
    <div>geeksforgeeks 4</div>
    <div>geeksforgeeks 5</div>
    <div>geeksforgeeks 6</div>
    <div>geeksforgeeks 7</div>
    <div>geeksforgeeks 8</div>
    <div>geeksforgeeks 9</div>
    <div>geeksforgeeks 10</div>
    <div>geeksforgeeks 11</div>
    <div>geeksforgeeks 12</div>
    <div>geeksforgeeks 13</div>
    <div>geeksforgeeks 14</div>
    <div>geeksforgeeks 15</div>
    <div>geeksforgeeks 16</div>
  </div>
</body>
  
  
</html>

chevron_right


repeat(number of columns/rows, the column width we want);

output 3




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.