CSS
Responsive Auto-Fitting Grid Columns
Effortlessly create adaptive grid layouts that automatically adjust column count and size based on available space using CSS Grid's powerful auto-fit and minmax functions.
/* HTML Structure */
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
</div>
/* CSS */
.grid-container {
display: grid;
/*
* repeat(auto-fit, ...) creates as many columns as fit in the container.
* minmax(250px, 1fr) ensures each column is at least 250px wide
* but also grows to fill available space (1fr) if larger than 250px.
*/
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px; /* Space between grid items */
padding: 20px;
background-color: #eee;
}
.grid-item {
background-color: #fff;
border: 1px solid #ddd;
padding: 15px;
text-align: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
How it works: This snippet showcases how to build a highly responsive grid layout that automatically adjusts its column count. The key is `grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))`. `auto-fit` tells the grid to create as many columns as possible without overflowing. `minmax(250px, 1fr)` defines each column: they'll be at least `250px` wide, but if there's extra space, they'll grow proportionally (`1fr`) to fill the container. This creates flexible, auto-adapting layouts perfect for image galleries or card displays.