DEV Community

John Peters
John Peters

Posted on • Updated on

HTML 5 Grid-Template-Areas

Consider this CSS:

areas

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:

css

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.

Alt Text

The Result

Alt Text

Grid-Template-Columns and Rows?

The grid-template-areas markup takes precedence over the following markup.

Alt Text

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.

Alt Text

Responsive?

Yes, out of the box ready for any size browser.

JWP2019

Discussion (0)