The difference between the autofit and autofill properties in CSS Grid
The Difference Between the Autofit and Autofill Properties in CSS Grid
Responsive web pages are essential and must always be kept in mind when developing a website. The Grid module enables developers to easily design web pages without using extensive positioning, as the id module provides a grid-type layout system with rows and columns.
Autofill Property
The autofill property is used to fill a row with available columns. Added columns will take up space, and the remaining columns will be empty. The autofill property is an important CSS Grid property, primarily used to create responsive layouts without using media queries.
Syntax
Let’s take a look at the syntax of the autofill property.
:auto-fill;
Example
In the following program.
- We first created an “autofill” class, and then within that class we placed three items, each with a different color and displaying a different box.
-
We set the “display property” to grid and assigned a height and width to the container. Later, the autofill property was used to set its minimum value.
-
Finally, we assigned sizes to the three items we created earlier.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of using the auto-fill property</title>
<style>
.first-item {
background-color:violet;
border: solid black 4px;
max-width: 100%;
min-height: 150px;
height: auto;
}
.second-item {
background-color: blue;
border: solid black 5px;
min-height: 150px;
max-width: 100%;
height: auto;
}
.third-item {
background-color: maroon;
border: solid black 5px;
min-height: 150px;
max-width: 100%;
height: auto;
}
.autfill {
margin-top: 4%;
border: solid black 3px;
width: 80vh; grid-template-columns: repeat(
auto-fill, minmax(190px, 1fr));
display: grid;
gap: 5px;
}
.para{
text-align: center;
}
</style>
</head>
<body>
<div class="content">
<div class="para"><h1>This is an example!!</h1></div>
<div class="autfill">
<div class="first-item"><h2 class="group">1</h1></div>
<div class="second-item"><h2 class="group">2</h1></div>
<div class="third-item"><h2 class="group">3</h1></div>
</div> </div>
</body>
</html>
AutoFit Property
The autofit property is similar to the autofill property, except that it will expand its size by taking up the available space, depending on the device width. If all items in the grid are empty, then all items are treated as a single track.
Example
In the example below, we set the autofit property to autofit. The autofit property will stretch itself to fill the entire width of the row and fill any empty space by stretching itself.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of using the auto-fit property</title>
<style>
#container {
display:grid;
width:100%;
border:2px solid blue;
grid-template-columns: repeat(auto-fit, minmax(100px, 2fr));
} #first-item,#second-item,#third-item {
height:100px;
margin:3px 15px 15px 2px;
background-color: blue;
}
</style>
</head>
<body>
<div id="container">
<div id="first-item">1</div>
<div id="second-item">2</div>
<div id="third-item">3</div>
</div>
</body>
<html>
In the example above, you can see that the items have filled the entire width of the row with some space to spare.
Autofit vs. Autofill Properties
Grid layout has different properties. Both the autofit and autofill properties are part of the CSS Grid Module. The syntax for grid layout is as follows – 1.
.container-grid{
display: grid;
}
The above is the syntax for grid layout, which sets the display properties of an HTML element to grid layout.
Conclusion
Both auto-fit and auto-fill are CSS – Grid properties are used to create responsive layouts without the need for media queries. The auto-fill property allows for space within a row, while the auto-fit property causes the content to stretch to completely fill the row. In this article, we introduced the auto-fill and auto-fit properties for creating responsive layouts.