grid-template-areas

This property specifies named grid areas, which are not associated with any particular grid item, but can be referenced from the grid-placement properties. 7.3. Named Areas: the grid-template-areas property

Links about grid-template-areas

1. Understanding CSS Grid: Grid Template Areas — Smashing Magazine

   posted on February 12, 2020 by Rachel Andrew

   In a new series, Rachel Andrew breaks down the CSS Grid Layout specification. This time, we take a look at how to use grid-template-areas to place items.

   

2. CSS Grid Template Areas In Action - Ahmad Shadeed

   posted on January 19, 2020 by iShadeed

   Since CSS Grid became supported in the major browsers back in March 2017 (Almost three years ago), I started using it in my personal and client projects, of ...

   Tags:

   • layout
   

Code sample

.grid {
  display: grid;
  grid-template-areas: "head head"
                       "nav  main"
                       "foot ...."
}