CoverT 19: grid-template-areas

codeInteractive Code Example

The grid-template-areas property specifies named grid areas is CSS grids. These areas are not associated with any particular grid item, but can be referenced from the various grid-placement properties (e.g. grid-area)

Example

<div id="grid">
 <header>header</header>
 <nav>nav</nav>
 <article>article</article>
 <aside>aside</aside>
 <footer>footer</footer>
</div>

#grid {
  display: grid;
  height: 400px;
  grid-gap: 10px;
  grid-template-columns: 100px 1fr 100px;
  grid-template-rows: 75px 1fr 50px;
  grid-template-areas: 
    "myHeader myHeader myHeader"
    "myNav myArticle myAside"
    "myFooter myFooter myFooter";
}

#grid > * {
  border: 1px solid black;
  padding: 5px;
}

header {
  grid-area: myHeader;
}

nav {
  grid-area: myNav;
}

article {
  grid-area: myArticle;
}

aside {
  grid-area: myAside;
}

footer {
  grid-area: myFooter;
}

Result

header
article
footer