@charset "utf-8";
/* CSS Document */
.grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(3, auto);
  grid-gap: 1em;
  grid-template-areas: "header header header"
                       "sidebar-1 article sidebar-2"
                       "footer footer footer";
}

header,
aside,
article,
footer {
  background: #f8f6f6;
  padding: 1em;
}

header {
  grid-area: header;
  text-align: center;
}

footer {
  grid-area: footer;
}

.sidebar-left {
  grid-area: sidebar-1;
}

.sidebar-right {
  grid-area: sidebar-2;
}
View Compiled


Resources