CSS

Create a Responsive Card Grid with CSS Grid

Build a flexible and responsive card layout that automatically adjusts column count based on viewport size using CSS Grid's `repeat()`, `minmax()`, and `auto-fit` functions.

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
}

.card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
}

How it works: This CSS Grid snippet creates a dynamic and responsive layout for cards. `grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))` automatically creates as many columns as can fit, each at least `250px` wide and growing to fill available space evenly. The `gap` property provides spacing between grid items, ensuring a clean and organized presentation across different screen sizes, making it ideal for product listings or image galleries.

Create a Responsive Card Grid with CSS Grid

Need help integrating this into your project?