CSS
Create Responsive Grid Layouts Without Media Queries
Build dynamic, responsive grid layouts that adapt to various screen sizes automatically using CSS Grid's `repeat(auto-fit, minmax(...))` function.
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
}
.grid-card {
background-color: #f0f0f0;
padding: 20px;
border-radius: 8px;
text-align: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Example HTML structure for context
<div class="responsive-grid">
<div class="grid-card">Item 1</div>
<div class="grid-card">Item 2</div>
<div class="grid-card">Item 3</div>
<div class="grid-card">Item 4</div>
<div class="grid-card">Item 5</div>
</div>
*/
How it works: This snippet illustrates how to create a highly flexible and responsive grid. By setting `grid-template-columns` to `repeat(auto-fit, minmax(250px, 1fr))`, the grid items will automatically adjust their number per row. `auto-fit` fills the available space, `minmax(250px, 1fr)` ensures each item is at least 250px wide but can grow to fill available space (`1fr`), and `gap` provides consistent spacing.