Consider this CSS:
It's the primary layout for a web site section. We want each page to have a Header, Footer, Aside and Main section.
Assigning Areas to HTML Components
CSS is used to create classes that assign the area(s) to specific HTML elements, either by class name or tag name as in the case of the aside shown here:
The Matching HTML
Each Div element is a container for one or more HTML elements. Each div element is placed strategically in the grid based on the class name or tag name.
The Result
Grid-Template-Columns and Rows?
The grid-template-areas markup takes precedence over the following markup.
Notice that the 15em shown above limits the width of the aside column. If we change it to 10em, we get this effect. Subtle but effective.
Responsive?
Yes, out of the box ready for any size browser.
JWP2019
Top comments (0)