CSS Grid Layout + レスポンシブ(1)

HTML

<div class="container">
  <main role="main" class="main">
  main
  </main>
  <div class="sidebar">
  sidebar
  </div>
</div>

CSS

/* for mobile */
.container {
  display: grid;
  /* 2行 */
  grid-template-rows: 1fr minmax(300px, auto);
  grid-template-columns: 1fr; /* 1列 */
  grid-template-areas:
    "main"
    "sidebar";
}
.main {
  grid-area: main;
  background-color: #fff2cc;
  padding: 1rem;
  min-height: 120px;
}
.sidebar {
  grid-area: sidebar;
  background-color: #ccfaff;
  padding: 1rem;
}

/* for PC */
@media (min-width: 992px) {
  .container {
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 340px;
    grid-template-areas:
      "main sidebar";
  }

  .main {
    min-height: 320px;
  }
}