A one-column layout arranges page content in one vertical column. On narrow screens, it gives each region the full screen width instead of squeezing content into multiple narrow columns. section 12.2.9
Use a CSS media query to switch to one column when the viewport is 500px wide or less. The article and aside then appear one after the other. section 12.2.9
@media (max-width: 500px) {
main {
display: grid;
grid-template-columns: 1fr;
}
}
This CSS makes the main element a one-column grid on screens no wider than 500px. section 12.2.9
Portfolio on a smartphone
A portfolio can use multiple columns on a desktop, two columns on a tablet, and a single-column layout on a smartphone. Test each screen size to confirm that the layout adapts as expected. section 11.3
