CSS
Build a Responsive Card Layout with CSS Grid
Create a dynamic, responsive grid layout for cards or gallery items using CSS Grid's repeat(auto-fit, minmax(...)) function to adapt to various screen sizes.
.card-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
.card {
background-color: #f0f0f0;
border-radius: 8px;
padding: 15px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
text-align: center;
}
How it works: This snippet creates a flexible and responsive card layout using CSS Grid. The `grid-template-columns` property with `repeat(auto-fit, minmax(280px, 1fr))` ensures that the grid columns automatically adjust. `auto-fit` tries to fit as many columns as possible, each at least `280px` wide, but also expands to `1fr` to fill available space, creating a clean, adaptable layout for varying screen sizes. `gap` provides consistent spacing between cards.