Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Difference between Auto-fit vs Auto-fill property in CSS grid
CSS Grid provides powerful tools for creating responsive layouts, with auto-fit and auto-fill being key properties that help manage column behavior without media queries. Both work with the repeat() function to create flexible grid layouts.
Syntax
.container {
grid-template-columns: repeat(auto-fill, minmax(min-width, 1fr));
/* or */
grid-template-columns: repeat(auto-fit, minmax(min-width, 1fr));
}
Auto-fill Property
The auto-fill property creates as many columns as possible to fit the container width, including empty columns. Empty columns maintain their minimum width, creating visible gaps.
Example
The following example demonstrates auto-fill behavior
<!DOCTYPE html>
<html>
<head>
<style>
.container-autofill {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
padding: 20px;
border: 2px solid #333;
margin: 20px 0;
}
.grid-item {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
border-radius: 5px;
}
</style>
</head>
<body>
<h3>Auto-fill Example</h3>
<div class="container-autofill">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
</div>
</body>
</html>
Three green boxes labeled "Item 1", "Item 2", and "Item 3" appear in a row. If the container is wide enough, empty columns will be created to the right, maintaining the 150px minimum width for potential columns.
Auto-fit Property
The auto-fit property creates columns to fit the content, then stretches existing columns to fill any remaining space. Empty columns collapse completely.
Example
The following example shows how auto-fit stretches content to fill available space
<!DOCTYPE html>
<html>
<head>
<style>
.container-autofit {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
padding: 20px;
border: 2px solid #333;
margin: 20px 0;
}
.grid-item {
background-color: #2196F3;
color: white;
padding: 20px;
text-align: center;
border-radius: 5px;
}
</style>
</head>
<body>
<h3>Auto-fit Example</h3>
<div class="container-autofit">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
</div>
</body>
</html>
Three blue boxes labeled "Item 1", "Item 2", and "Item 3" appear in a row. The items stretch to fill the entire width of the container with no empty space remaining.
Comparison
| Property | Empty Columns | Content Stretching | Best Use Case |
|---|---|---|---|
auto-fill |
Preserved | No | When you want consistent column sizes |
auto-fit |
Collapsed | Yes | When you want content to fill available space |
Conclusion
Use auto-fill when you want to maintain consistent column widths with potential empty space, and auto-fit when you want content to expand and fill the entire container width. Both properties are essential for creating responsive grid layouts without media queries.
1K+ Views
