CSS
Build a Responsive Card Grid Layout with CSS Grid
Design a flexible and responsive grid for cards or galleries using CSS Grid's `repeat()` function and media queries to adapt columns for different screen sizes.
.card-grid {
display: grid;
grid-template-columns: repeat(1, 1fr); /* Default single column */
gap: 1.5em; /* Spacing between grid items */
padding: 1.5em;
max-width: 1200px;
margin: 0 auto;
}
.card {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 8px;
padding: 1em;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
text-align: center;
}
/* Medium screens: 2 columns */
@media (min-width: 600px) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Large screens: 3 columns */
@media (min-width: 900px) {
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* HTML Structure */
/*
<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 responsive grid layout suitable for cards or a gallery using CSS Grid. By default, it displays items in a single column. Media queries are used to dynamically adjust the `grid-template-columns` property, changing the number of columns to `repeat(2, 1fr)` for medium screens and `repeat(3, 1fr)` for large screens. The `gap` property ensures consistent spacing between grid items.