A mobile-first layout starts with the smallest practical screen, keeps only essential content, and adds complexity when the viewport grows. Think of it as seasoning CSS: adding is easier than scraping it off. section 14.5
Build the layout in small, visible steps:
- Start with a minimal layout that works on a smartphone, often around 320 pixels wide—or use analytics to choose a more realistic starting width. section 14.5
- Include only elements essential to the user experience, especially when visitors may have slow connections or limited data plans. section 14.5
- Use media queries to add or modify layout features for wider screens rather than removing existing mobile styles. section 14.12 section 14.5
.container {
display: grid;
grid-template-columns: 1fr; #1
grid-template-areas: #1
"header" #1
"article" #1
"sidebar" #1
"footer"; #1
}
.quotation {
display: none; #2
}
@media (min-width: 750px) {
.container {
grid-template-columns: repeat(4, 1fr); #3
grid-template-areas: #3
"header header header header" #3
"quotation article article sidebar" #3
"footer footer footer footer"; #3
}
.quotation {
display: block; #4
grid-area: quotation;
}
}
This pattern places header, article, sidebar, and footer in one column by default, then creates a four-column arrangement at 750 pixels and reveals the quotation sidebar. section 14.5
