html - 如何在不影响其他区域的情况下在CSS Grid中制作一个动态区域？

Question

所以问题来了。我想要一个看起来像这样的布局，其中 C 随着内容的增加而动态增长。

然而，这就是我得到的。基本上，A 行与 C 一起增长:

我的带有模板区域的包装器代码:

wrapper{
  display: grid;
  grid-template-columns: 0.64fr 1fr 5fr 0.64fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "header header header header"
    ". A C ."
    ". B C .";
}

我考虑过将 A 和 B 分组到一个列中，然后使用 flexbox。但是，是否有更多的 CSS 网格方式来处理这个问题？

Answer 1

我会为你的侧边栏使用 flexbox 并使用:

grid-template-areas:
    "header header header header"
    ". sidebar C ."

请看下面的演示:

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.wrapper{
  display: grid;
  grid-template-columns: 0.64fr 1fr 5fr 0.64fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "header header header header"
    ". sidebar C .";
  height: 100vh;
}

.header {
  grid-area: header;
  background: lightblue;
}

.sidebar {
  grid-area: sidebar;
  background: lightblue;
  display: flex;
  flex-direction: column;
}

.A {
  background: pink;
  
}
.B {
  background: orange;
}

.C {
  grid-area: C;
  background: lightgreen;
}

<div class="wrapper">
  <div class="header">HEADER</div>
  <div class="sidebar">
    <div class="A">A</div>
    <div class="B">B</div>
  </div>
  <div class="C">CONTENT</div>
</div>

另一种方法是在您的 CSS 网格中再增加一行 - 请注意使用 psuedo 元素 来填充 A 和 B< 下方的空间.

请看下面的演示:

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.wrapper{
  display: grid;
  grid-template-columns: 0.64fr 1fr 5fr 0.64fr;
  grid-template-rows: auto auto auto 1fr;
  grid-template-areas:
    "header header header header"
    ". A C ."
    ". B C ."
    ". D C .";
  height: 100vh;
}

.wrapper:after {
  content: '';
  display: block;
  grid-area: D;
  background: lightblue;
}

.header {
  grid-area: header;
  background: lightblue;
}

.A {
  grid-area: A;
  background: pink;
  
}
.B {
  grid-area: B;
  background: orange;
}

.C {
  grid-area: C;
  background: lightgreen;
}

<div class="wrapper">
  <div class="header">HEADER</div>
  <div class="A">A</div>
  <div class="B">B</div>
  <div class="C">CONTENT</div>
</div>