# Mastering CSS Grid Layout in 2024
CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.
## Why CSS Grid?
Unlike Flexbox, which is one-dimensional, Grid is two-dimensional. This means it can handle both columns and rows simultaneously.
## Common Patterns
### The 12-Column Grid
```css
.grid-container {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 20px;
}
```
### Holy Grail Layout
Grid makes implementing the classic "header, sidebar, main content, footer" layout trivial.
## Conclusion
CSS Grid is an essential tool for modern web design, enabling layouts that were previously impossible or required complex hacks.