Back to Exercises
What is CSS Grid?
CSS Grid is a two-dimensional layout system that allows you to create complex layouts with rows and columns. It's perfect for creating page layouts, card grids, and complex component arrangements.
Basic Grid
Simple grid with equal columns:
3-Column Grid
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
/* Basic Grid CSS */
.basic-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
Grid Template Areas
Define layout using named areas:
Layout with Named Areas
/* Grid Template Areas CSS */
.areas-grid {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: 80px 200px 80px;
gap: 1rem;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
Grid Gap
Control spacing between grid items:
Different Gap Sizes
Gap 2rem
Item
Item
Item
Item
Item
/* Grid Gap CSS */
.gap-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem; /* Both row and column gap */
/* gap: 1rem 2rem; Row gap Column gap */
}
Grid Alignment
Align items within grid cells:
Centered Items
/* Grid Alignment CSS */
.align-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
height: 300px;
align-items: center; /* Vertical alignment */
justify-items: center; /* Horizontal alignment */
}
Grid Spanning
Make items span multiple columns or rows:
Spanning Items
Span 2 Columns
Item
Item
Span 3 Columns
Span 2 Rows
Item
Item
/* Grid Spanning CSS */
.span-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-row-2 { grid-row: span 2; }
Responsive Grid
Grid that adapts to different screen sizes:
Auto-Fitting Grid
Responsive
Item
Item
Item
Item
Item
/* Responsive Grid CSS */
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
/* Auto-fill vs Auto-fit */
.auto-fill { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.auto-fit { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
Complex Layout
Real-world layout example:
Complete Page Layout
Navigation
Main Content
Aside
/* Complex Layout CSS */
.complex-layout {
display: grid;
grid-template-columns: 250px 1fr 200px;
grid-template-rows: 60px 1fr 60px;
grid-template-areas:
"nav nav nav"
"sidebar content aside"
"footer footer footer";
gap: 1rem;
min-height: 400px;
}
Card Grid
Responsive card layout:
Card Grid Layout
Card 1
This is a responsive card that adapts to available space using CSS Grid.
Card 2
Cards automatically adjust their size based on the container width.
Card 3
Perfect for creating flexible, responsive layouts.
Card 4
Grid makes it easy to create consistent spacing and alignment.
/* Card Grid CSS */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
.card {
background: white;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 1.5rem;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
Grid Lines
Position items using grid line numbers:
Line-Based Positioning
1 / 3
3 / 4, 1 / 3
1 / 2
2 / 3
/* Grid Lines CSS */
.lines-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.line-item:nth-child(1) { grid-column: 1 / 3; }
.line-item:nth-child(2) { grid-column: 3 / 4; grid-row: 1 / 3; }
.line-item:nth-child(3) { grid-column: 1 / 2; }
.line-item:nth-child(4) { grid-column: 2 / 3; }
Auto Grid
Automatic grid with flexible sizing:
Auto-Fill Grid
Auto
Item
Item
Item
Item
Item
Item
Item
/* Auto Grid CSS */
.auto-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 1rem;
}
/* Auto-fill creates as many columns as fit */
/* Auto-fit collapses empty columns */
Grid Properties
- display: grid: Creates a grid container
- grid-template-columns: Defines column sizes
- grid-template-rows: Defines row sizes
- grid-template-areas: Named grid areas
- gap: Space between grid items
- grid-column: Item column position
- grid-row: Item row position
- grid-area: Item area assignment
Grid vs Flexbox
- Grid: Two-dimensional (rows + columns)
- Flexbox: One-dimensional (row OR column)
- Grid: Better for page layouts
- Flexbox: Better for component layouts
- Grid: More powerful for complex layouts
- Flexbox: Better for content distribution
Grid Best Practices
- Use fr units for flexible sizing
- Combine auto-fit/auto-fill with minmax()
- Use grid-template-areas for complex layouts
- Set gap instead of margins
- Use grid lines for precise positioning
- Consider subgrid for nested grids