CSS Grid Template Areas: Naming Regions and Building Readable Layouts

grid-template-areas is one of the most readable things in CSS. Instead of describing a layout through numeric column and row coordinates, you draw it — using a string of names that mirrors the visual arrangement you want. A two-column dashboard with a header and footer looks, in the CSS, like a two-column dashboard with a header and footer. This article covers the syntax in full, explains how…