CSS Grid Layout: The Fr Unit - GeeksforGeeks

02 Jul, 2021
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 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 1
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.
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 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 2. 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>
repeat(number of columns/rows, the column width we want);
output 3
Supported Browsers:
Google Chrome
Internet Explorer
Firefox
Opera
Safari
ysachin2314
CSS-Basics
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to apply style to parent if it has child with CSS?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
Design a web page using HTML and CSS
How to Upload Image into Database and Display it using PHP ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript