CSS Grid
Definition
A powerful CSS layout system that creates two-dimensional layouts with rows and columns for precise content placement.
What is CSS Grid?
CSS Grid is a layout system built into CSS that lets you create complex two-dimensional layouts with rows and columns simultaneously. Unlike older methods that required hacks and workarounds, Grid was designed specifically for layout.
It's the most powerful layout tool available in CSS today.
When to Use CSS Grid
Grid is ideal for:
- Full page layouts
- Complex magazine-style designs
- Image galleries with varied sizes
- Any layout needing precise row AND column control
- Overlapping elements
Key Concepts
Grid Container
The parent element that becomes a grid. You define how many columns and rows it has and their sizes.
Grid Items
Direct children of the container. They automatically fill grid cells or can be placed in specific positions.
Grid Lines
The invisible lines between columns and rows. You can place items by referencing these lines.
Grid Areas
Named regions that span multiple cells. Useful for creating layouts like header, sidebar, main, and footer.
Simple Example Structure
| Row/Column | Column 1 | Column 2 | Column 3 |
|---|---|---|---|
| Row 1 | Header spanning all columns | ||
| Row 2 | Sidebar | Main content | Main content |
| Row 3 | Footer spanning all columns |
Grid vs Flexbox
Use Grid for the overall page structure. Use Flexbox for components within that structure. They complement each other—there's no need to choose just one.
Browser Support
CSS Grid works in all modern browsers. Only very old browsers (IE11 and earlier) have limited support, and those represent a tiny fraction of users today.