Last Updated: November 21, 2025
Template Basics
| Property | Example |
|---|---|
display
|
grid |
grid-template-columns
|
200px repeat(2, 1fr) |
grid-template-areas
|
"header header" "sidebar content" |
Commands
grid-area: header
Place element
grid-column: 1 / span 2
Span columns
grid-template-areas
Name layout
Tips
Wrap grid children in semantic containers and update templates in media queries.
💡 Pro Tip:
Use descriptive area names and adjust templates per breakpoint.