CSS Grid
The ultimate two-dimensional layout system - precise control meets flexibility
Grid Fundamentals
CSS Grid allows you to create complex layouts by defining rows and columns, then placing items exactly where you want them.
Basic Grid
/* Simple 3-column grid */
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
}
/* Using repeat() */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}Responsive Grid
/* Auto-responsive grid */
.grid {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
/* auto-fill vs auto-fit */
/* auto-fill: keeps empty columns */
/* auto-fit: expands items to fill */Different Sized Columns
/* Mixed column sizes */
.grid {
display: grid;
grid-template-columns: 200px 1fr 150px;
gap: 1rem;
}
/* Using minmax() */
.grid {
grid-template-columns:
minmax(150px, 25%)
1fr
minmax(100px, 200px);
}Grid Gap
/* Grid gap */
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem; /* row and column gap */
}
/* Different gaps */
.grid {
row-gap: 1rem;
column-gap: 2rem;
/* or */
gap: 1rem 2rem;
}Grid Item Placement
Control exactly where items appear in your grid using line numbers or spans.
Grid Lines
/* Spanning columns */
.item-1 {
grid-column: span 2;
}
/* Spanning rows */
.item-3 {
grid-row: span 2;
}
/* Specific placement */
.item-6 {
grid-column: 1 / -1; /* Full width */
}
/* Using line numbers */
.item {
grid-column: 2 / 4;
grid-row: 1 / 3;
}Grid Auto Flow
/* Auto placement */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row dense;
}
/* Dense packing fills gaps */
.large-item {
grid-column: span 2;
grid-row: span 2;
}Grid Template Areas
Define your layout visually using named grid areas - it's like ASCII art for layouts!
Named Grid Areas
/* Define areas visually */
.grid {
display: grid;
grid-template-areas:
"header header header"
"nav main sidebar"
"nav main sidebar"
"footer footer footer";
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto auto;
gap: 1rem;
}
/* Assign items to areas */
.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }Responsive Areas
/* Mobile layout */
.grid {
grid-template-areas:
"logo"
"menu"
"content"
"ads";
}
/* Desktop layout */
@media (min-width: 768px) {
.grid {
grid-template-areas:
"logo menu menu"
"content content ads";
grid-template-columns:
200px 1fr 300px;
}
}Real-World Grid Layouts
Practical grid layouts you can use in your projects today.
Card Gallery
Card Title
Card content goes here
Featured Card
This card spans multiple columns
Card Title
Card content goes here
Card Title
Card content goes here
/* Card gallery */
.gallery {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
/* Featured card */
.featured {
grid-column: span 2;
grid-row: span 2;
}
@media (max-width: 768px) {
.featured {
grid-column: span 1;
grid-row: span 1;
}
}Magazine Layout
/* Magazine layout */
.magazine {
display: grid;
grid-template-columns:
repeat(4, 1fr);
grid-template-rows:
repeat(3, minmax(100px, auto));
gap: 1rem;
}
.feature-article {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
.magazine-sidebar {
grid-column: 4;
grid-row: 1 / 4;
}Dashboard Grid
/* Dashboard layout */
.dashboard {
display: grid;
grid-template-columns:
repeat(4, 1fr);
grid-auto-rows:
minmax(120px, auto);
gap: 1rem;
}
.stats { grid-column: span 2; }
.chart {
grid-column: span 2;
grid-row: span 2;
}
.activity { grid-column: span 4; }Masonry-like Layout
/* Masonry-style grid */
.masonry {
display: grid;
grid-template-columns:
repeat(3, 1fr);
grid-auto-rows: 100px;
grid-auto-flow: dense;
gap: 1rem;
}
.tall { grid-row: span 2; }
.wide { grid-column: span 2; }
.big {
grid-column: span 2;
grid-row: span 2;
}Grid Best Practices
Use FR Units
The fr unit creates flexible tracks that share available space proportionally.
Mobile-First Grid
Start with a single column on mobile, then add complexity for larger screens.
Combine with Flexbox
Use Grid for layout, Flexbox for component alignment. They work brilliantly together!
Named Lines
Name your grid lines for more readable and maintainable code.