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

Question

是否可以在移动设备上使用 CSS 网格拆分边栏，但在桌面设备上将其视为一种？

在移动设备上，我希望一切都堆叠起来介绍 侧边栏的一部分 内容，然后是侧边栏的其余部分.

在桌面上，我希望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

您可以从这样的开始，然后根据您的需要调整每个 block :

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>