CSS Grid Layout

Placing Elements Using Grid Template Areas

CSS Grid provides a feature that lets you create named grid areas, then you use those names to position items on the grid.

First, you'll use the grid-area property to assign a custom name to each grid area.

Then you'll use the grid-template-areas property to define how the layout looks, by referencing those custom named areas.

Layout 1

Header
Main

Layout 2

Header
Main

Layout 3

Header
Main

Layout 4

Header
Main