CSS
Responsive Card Grid Without Media Queries
Build flexible, responsive grid layouts for cards or content blocks using CSS Grid's `repeat(auto-fit, minmax())` function, adapting to screen size automatically.
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px; /* Space between grid items */
padding: 20px;
}
.grid-item {
background-color: #f0f0f0;
border: 1px solid #ddd;
padding: 15px;
text-align: center;
}
How it works: This CSS Grid snippet creates a responsive layout where items automatically adjust their width and number of columns based on the available space, without needing explicit media queries. `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` ensures each item is at least 280px wide, and as many as possible fit on a row, taking up equal space.