HTML & CSS
/Advanced
Grid Areas
Definition
The `grid-template-areas` property specifies areas within the grid layout. You literally 'draw' the layout using named strings.
Explain Like I'm New
The most visual and magical feature in CSS. You give your elements names (like 'head', 'nav', 'main'). Then, in the parent container, you write a visual ASCII-art map of where those names should go. If you want the header to span 3 columns, you just write `'head head head'`.
Real World Example
Instantly rearranging a complex desktop layout into a stacked mobile layout by simply redefining the ASCII map inside a Media Query, without touching the HTML order.
Common Use Cases
- •App shells
- •Rapid layout prototyping
- •Responsive reorganizing
Interactive Example
Interview Questions
basic
- How do you assign a name to a grid item so you can use it in the map?
intermediate
- How do you leave an empty cell in the grid area map?