CSS Grid Layout: Build Complex Layouts Without Frameworks

## What is CSS Grid?

CSS Grid Layout is a two-dimensional layout system that allows you to create complex web layouts with rows and columns simultaneously. Unlike Flexbox (one-dimensional), Grid handles both axes at once.

## Basic Grid Setup

“`css
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
gap: 20px;
}
“`

## Grid Template Areas

“`css
.layout {
display: grid;
grid-template-areas:
“header header header”
“sidebar main main”
“sidebar main main”
“footer footer footer”;
grid-template-columns: 250px 1fr 1fr;
gap: 16px;
min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
“`

## Responsive Grid with Auto-Fit

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

.card {
background: white;
border-radius: 12px;
padding: 24px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}

.card:hover {
transform: translateY(-4px);
}
“`

## Spanning Items

“`css
.featured {
grid-column: span 2;
grid-row: span 2;
}

.wide {
grid-column: 1 / -1;
}
“`

## Alignment

“`css
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
gap: 16px;
justify-content: center;
align-content: center;
justify-items: center;
align-items: center;
}
“`

## Practical Dashboard Layout

“`css
.dashboard {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
padding: 20px;
}

.stat-card { grid-column: span 1; }
.chart-large { grid-column: span 2; grid-row: span 2; }
.activity-feed { grid-column: span 1; grid-row: span 2; }
.recent-orders { grid-column: 1 / -1; }
“`

## Conclusion

CSS Grid is incredibly powerful for building responsive layouts. Combined with modern CSS features, you can create production-quality designs.