在CSS Grid中使用容器的最佳方法是什么？

Question

我想在CSS Grid中实现以下布局。

请注意，“ C”行的背景是蓝色的，是全角，但其中的内容是自动换行的，而不是全角。但是我不知道实现此目标的最佳方法是什么？

这是我的代码：

index

我尝试过的事情：

1. 我已经尝试对行“ C”的两边填充16.66％。

2. 我尝试使C行成为一个网格本身。在其中，我会有0.5fr，1fr，1fr，0.5fr列。但这是很多重复的代码，并且很容易完成很多工作。

解决此问题的最CSS网格方法是什么？我看过的所有教程似乎都没有涵盖这种特殊情况。

Answer 1

一种选择是使C span 居中排列为两列，看起来与您的布局相符，并使用 pseudo元素来处理背景

• 在伪元素中添加grid-row: 3和grid-column: 1 / -1，以将其放置在与C相同的位置，但要覆盖整个宽度

• 使用z-index: -1和position: relative

将其向后推

请参见下面的演示

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.wrapper{
  display: grid;
  grid-template-columns: 0.5fr 1fr 1fr 0.5fr;
  grid-template-areas:
    "A A A A"
    ". B B ."
    ". C C ."
    ". D D .";
  height: 100vh;
}

.wrapper:after {
  content: '';
  display: block;
  grid-column: 1 / -1;
  grid-row: 3;
  background: cadetblue;
  position: relative;
  z-index: -1;
}

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

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

.D {
  grid-area: D;
  background: orange;
}

<div class="wrapper">
  <div class="A">A</div>
  <div class="B">B</div>
  <div class="C">C</div>
  <div class="D">D</div>
</div>

Answer 2

由于您希望元素的两面都有2fr和0.5fr，因此这意味着元素（B和D）的宽度等于{ {1}}，然后将其居中放置在元素2*100%/3中，您可以在其中应用填充以将内容压入中间。

您可以简化代码，而无需使用如下所示的CSS网格：

C

body {
  margin: 0;
}

.A {
  background: pink;
  min-height: 40px;
}

.B,
.D {
  width: calc(2*100%/3);
  background: orange;
  margin: auto;
  min-height: 100px;
}

.C {
  background: lightgreen;
  padding: 0 calc(100%/6);
  min-height: 70px;
}