somascope
3/22/2018 - 8:19 PM

CSS Grid Areas

Example of setting up columns, rows and areas

body {
  display: grid;
  grid-template-columns: 30% auto;
  grid-template-rows: 60px auto 60px;
  grid-template-areas: "hdr hdr"
                       "sidebar main"
                       "ftr ftr";
  margin: 0;
}

header {
  grid-area: hdr;
}

aside {
  grid-area: sidebar;
}

main {
  grid-area: main;
}

footer {
  grid-area: ftr;
}