CSS Grid Layout: The Fr Unit

Last Updated : 03 May, 2023

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 values:

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 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.

html

<!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>

Output:

output 1

We have 4 columns each taking 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.

html

<!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>

Output:

output 2

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 3: This example illustrates the use of fr unit with repeat() and auto notation.

html

<!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>