使用CSS网格在移动设备的顶部和底部拆分侧边栏

Question

是否有可能在移动设备上使用CSS网格拆分侧边栏，但在台式机上将其视为一种？

在移动设备上，我希望所有内容堆叠在一起[[Intro 侧边栏的一部分 内容，然后是其余的[[侧边栏。

在桌面上，我想将Intro和

Content

堆叠在一列中，并在其旁边堆叠2个侧边栏。 我关闭的时间是

grid-template-areas:
  "intro"
  "sidebarTop"
  "content"
  "sidebarBottom";
@media (min-width: 600px) {
  grid-template-areas:
    "intro sidebarTop"
    "content sidebarTop"
    "content sidebarBottom";
}

但是sidebarTop总是占用尽可能多的空间。我希望它仅使用其使用的空间，并让sidebarBottom占用其余空间。

有什么建议吗？
Example

Answer 1

main {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, 25%);
  grid-template-areas: "intro" "sidebarTop" "content" "sidebarBottom";
  grid-gap: 5px;
}

section {
  box-sizing: border-box;
  padding: 15px;
  background-color: tomato;
  color: white;
}

@media (min-width: 600px) {
  main {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 33.33%);
    grid-template-areas: "intro sidebarTop" "content sidebarTop" "content sidebarBottom";
  }
}

<main>
  <section id="intro">
    intro
  </section>
  <section id="sidebarTop">
    sidebarTop
  </section>
  <section id="content">
    content
  </section>
  <section id="sidebarBottom">
    sidebarBottom
  </section>
</main>