Building Responsive Layouts with CSS Grid

CSS Grid has revolutionized how we approach web layouts. Unlike older layout methods, Grid provides a two-dimensional system that gives us unprecedented control over both rows and columns.

Why CSS Grid?

• Two-dimensional control: Unlike Flexbox, Grid handles both rows and columns
• Responsive by default: Built-in responsive capabilities
• Semantic markup: Cleaner HTML structure
• Browser support: Excellent support across modern browsers

Basic Grid Setup

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

Common Layout Patterns

1. Holy Grail Layout

.layout {
	display: grid;
	grid-template-areas:
		"header header header"
		"sidebar main aside"
		"footer footer footer";
	grid-template-rows: auto 1fr auto;
	min-height: 100vh;
}
 
.header {
	grid-area: header;
}
.sidebar {
	grid-area: sidebar;
}
.main {
	grid-area: main;
}
.aside {
	grid-area: aside;
}
.footer {
	grid-area: footer;
}

2. Card Grid

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 2rem;
}

3. Magazine Layout

.magazine {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 1rem;
}
 
.article {
	grid-column: span 8;
}
 
.sidebar {
	grid-column: span 4;
}

Advanced Techniques

Subgrid (Future-Proof)

.nested-grid {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: 1 / -1;
}

Container Queries Integration

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

Performance Considerations

• Use content-visibility: auto for large grids
• Consider grid-template-rows: masonry for Pinterest-style layouts (experimental)
• Optimize with will-change: transform for animated grid items

Conclusion

CSS Grid is a powerful layout system that simplifies complex responsive designs. By mastering these patterns and techniques, you'll be able to create layouts that are both beautiful and maintainable.