Responsive Grids in CSS

1. Auto-fit vs Auto-fill

Use auto-fit or auto-fill with minmax() to create flexible grid columns:

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

• auto-fit: collapses empty tracks
• auto-fill: keeps the space reserved, even if empty

2. Using Media Queries

Combine Grid with media queries for more control:

.grid {
    display: grid;
    gap: 20px;
}

@media (min-width: 600px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
            

3. Responsive Card Grid Example

This pattern is great for blog cards, product listings, etc.:

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    padding: 1rem;
}
.card {
    background: #fff;
    padding: 1rem;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
            

4. Best Practices

• Use minmax() for flexible column widths.
• Combine Grid with media queries for optimal layout control.
• Use gap instead of margins for cleaner spacing.

Conclusion

Responsive grids are essential for modern web design. By using CSS Grid's dynamic features like auto-fit, minmax, and media queries, you can ensure your layout works across all screen sizes effortlessly.