div class="site"
  
  h1 class="header">
  
  div class="main"
  
  div class="sidebar"
  
 div class="footer"
  
div

.site {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto;
  grid-template-areas:
    "header"
    "main"
    "sidebar"
    "footer";
  margin: 0 auto;
  max-width: 800px;
}

@media screen and (min-width: 600px) {
  
.site {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto;
  grid-template-areas:
    "main sidebar"
    "header header"
    "footer footer";
  margin: 0 auto;
  max-width: 800px;
} 
  
}

.main, .sidebar, .footer {
  background: red;
  height: 100px;
}

.main {
  grid-area: main;
}

.header {
  grid-area: header;
}

.sidebar {
  background: yellow;
  grid-area: sidebar;
}

.footer {
  background: blue;
  grid-area: footer;
}

Process

  • Build accessible mobile-first layout without grid
  • Use mobile-first layout as fallback for all browsers
  • Use @supports to detect grid support
  • At the appropriate breakpoint, create layout with grid and grid-areas
  • Explore new layouts as viewport widens

See the Pen CSS Grid by Shane Prendergast (@webknit) on CodePen.

References

Posted on

Other library topics

Next/Prev

Worthy of Note

Worthy of Note is a site aimed at Web Designers & Developers. It offers a wide range of resources to help assist anyone in the web industry.

View