CSS Grid Layout: The Fr Unit
The CSS Grid Layout module is used to create a grid-based layout system. Utilizing rows and columns, it simplifies the design of webpages without relying on 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);
The Fr Unit
The fr unit is a fractional unit, an input that automatically calculates layout divisions when adjusting for gaps inside the grid.
Key Points:
- The fr unit allows you to define grid tracks as fractions of the available space.
- If a grid container has 4 columns with 1fr each, they will each take up an equal amount of space, i.e., each column will be 25% of the available space.
- Using different fractional values allows for varied column sizes within the same grid.
Example 1. This example illustrates the use of fr unit.
<!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>w3wiki</h1>
<div class="container">
<div>w3wiki 1</div>
<div>w3wiki 2</div>
<div>w3wiki 3</div>
<div>w3wiki 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.
<!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>w3wiki</h1>
<div class="container">
<div>w3wiki 1</div>
<div>w3wiki 2</div>
<div>w3wiki 3</div>
<div>w3wiki 4</div>
<div>w3wiki 5</div>
<div>w3wiki 6</div>
<div>w3wiki 7</div>
<div>w3wiki 8</div>
<div>w3wiki 9</div>
<div>w3wiki 10</div>
<div>w3wiki 11</div>
<div>w3wiki 12</div>
<div>w3wiki 13</div>
<div>w3wiki 14</div>
<div>w3wiki 15</div>
<div>w3wiki 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.
<!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>w3wiki</h1>
<div class="container">
<div>w3wiki 1</div>
<div>w3wiki 2</div>
<div>w3wiki 3</div>
<div>w3wiki 4</div>
<div>w3wiki 5</div>
<div>w3wiki 6</div>
<div>w3wiki 7</div>
<div>w3wiki 8</div>
<div>w3wiki 9</div>
<div>w3wiki 10</div>
<div>w3wiki 11</div>
<div>w3wiki 12</div>
<div>w3wiki 13</div>
<div>w3wiki 14</div>
<div>w3wiki 15</div>
<div>w3wiki 16</div>
</div>
</body>
</html>
Output: repeat(number of columns/rows, the column width we want);
output 3
The CSS Grid Layout and the fr unit offer powerful tools for creating flexible and responsive web layouts. By understanding and leveraging these properties, developers can design sophisticated grid systems that adjust seamlessly to different screen sizes and content requirements. The fr unit, in particular, simplifies the process of distributing available space among grid items, enhancing both the design and functionality of web pages.
Supported Browsers:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Contact Us