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 >
|
Output: repeat(number of columns/rows, the column width we want);
output 3
Supported Browsers:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Share your thoughts in the comments
Please Login to comment...