<main>
  <div class="container">
    <h1>CSS GRID CONTAINER</h1>
    <div class="box">
      <p>RESPONSIVE GOODNESS</p>
    </div>
  </div>
</main>

main {
  text-align: center;
  background: #252d3d;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  h1 {
    color: #f8d58c;
  }
  .box {
    height: 5em;
    width: 100%;
    background: #d0c1fa;
    color: darken(#d0c1fa, 40%);
    p {
      opacity: .6;
    }
    font-weight: bold;
    border-radius: 1em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
}

.container {
  display: grid;
  grid-template-columns:
    minmax(1em, 1fr)
    [main-start] minmax(0, 60em) [main-end]
    minmax(1em, 1fr);
  width: 100%;

  > * {
    grid-column: main;
  }
}