CSS Grid: template-areas auto-fit minmax
Name grid areas for readable layouts, use auto-fit with minmax() for responsive columns, and control implicit tracks.
Named Template Areas — Visual Layout
grid-template-areas lets you name regions in a visual ASCII-art format. Each string is a row; each word is a cell. Dots (.) represent empty cells. Assign elements with grid-area: name.
.layout {
display: grid;
grid-template-areas:
'header header'
'sidebar main'
'footer footer';
grid-template-columns: 240px 1fr;
grid-template-rows: 60px 1fr 48px;
min-height: 100vh;
}
header { grid-area: header; }
.sidebar { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }Responsive Template Areas with Media Queries
Change the template-areas layout at breakpoints to move the sidebar from a column to below main on mobile.
.layout {
grid-template-areas:
'header'
'main'
'sidebar'
'footer';
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.layout {
grid-template-areas:
'header header'
'sidebar main'
'footer footer';
grid-template-columns: 220px 1fr;
}
}All lessons in this course
- Flexbox Deep Dive: alignment wrapping order
- CSS Grid: template-areas auto-fit minmax
- Combining Flexbox and Grid
- CSS Variables for Theming