如何在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 Grid处理此问题的方法吗？

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>