CSS
Dynamic Responsive Grid with auto-fit and minmax
Build a truly responsive grid layout that automatically adjusts the number of columns and item sizes based on viewport width, using `auto-fit` and `minmax` without media queries.
.card-grid {
display: grid;
/* Automatically adjust columns */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px; /* Space between grid items */
padding: 20px;
border: 1px solid #ccc;
}
.card {
background-color: #f9f9f9;
border: 1px solid #ddd;
padding: 15px;
text-align: center;
box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}
/* Basic HTML structure for context:
<div class="card-grid">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
<div class="card">Card 4</div>
<div class="card">Card 5</div>
<div class="card">Card 6</div>
</div>
*/
How it works: This snippet creates a dynamic, responsive grid layout for items like cards or gallery images. `grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))` is the key. `auto-fit` will fit as many columns as possible. `minmax(250px, 1fr)` ensures each column is at least 250px wide but will grow to fill available space equally (1fr) if more room is available, providing responsiveness without media queries.