grid-example

by Wen Zhu

HTML

<div class="grid-container">
  <div class="grid-item header">HEADER</div>
  <div class="grid-item main">MAIN SECTION</div>
  <div class="grid-item sidebar">RIGHT SIDEBAR</div>
  <div class="grid-item footer">FOOTER</div>
</div>

CSS

.grid-container {
  display: grid;
  /* 2*3 grid */
  grid-template-columns: auto 100px;
  grid-template-rows: 50px auto 30px;
}

.grid-item {
  text-align: center;
}

.header {
  background: pink;
  grid-column: 1 / 3;
  grid-row: 1;
}

.main {
  background: grey;
  grid-column: 1 / 2;
  grid-row: 2;
  min-height: 200px;
}

.sidebar {
  background: yellow;
  grid-column: 2;
  grid-row: 2;
}

.footer {
  background: purple;
  grid-column: 1 / 3;
  grid-row: 3;
}

@media (max-width: 760px) {
  .main {
    grid-column: 1 / span 2;
  }
  
  .sidebar {
    display: none;
  }
}