CSS Grid

A simple "Holy Grail" Layout with CSS Grid

by hennson

HTML

<div class="container"> 
  <header>header</header> 
  <article>article</article> 
  <aside>aside</aside> 
  <footer>footer</footer>  
</div>

CSS

/* RESET */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html,
body {
  height: 100%;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

#root {
  isolation: isolate;
}

/* / RESET */

/* THE GRID */

.container {
  height: 100vh;
  display: grid;
  grid-template-rows: 5rem 4fr 1fr 2.5rem;
  grid-template-columns: 100%;
  grid-template-areas:
    "header"
    "content"
    "sidebar"
    "footer";
  grid-row-gap: 0.5rem;
  grid-column-gap: 0.5rem;
}

header {
  grid-area: header;
}

article {
  grid-area: content;
}

aside {
  grid-area: sidebar;
}

footer {
  grid-area: footer;
}

@media screen and (min-width: 44.001em) {
  .container {
    grid-template-rows: 12.5rem 1fr 6.25rem;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-areas:
      "header header header header"
      "content content content sidebar"
      "footer footer footer footer";
  }
}

/* / THE GRID */

/* DESIGN */
header,
footer,
article,
aside {
  text-transform: uppercase;
  font-weight: 700;
  border: 0.125rem solid rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: center;
  align-items: center;
}

header,
footer {
  background-color: #24aa60;
  color: #fff;
}

article {
  background-color: #daf6a1;
  color: #126523;
}

aside {
  background-color: #e3f8b8;
  color: #126523;
}

/* / DESIGN */