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 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
Please Login to comment...