Css网格模板区域；有时是空的网格区域-令人惊讶的行为

Question

我有一个使用grid-template-area建立的CSS网格。我有四排；具有两个按钮的行，然后具有div的行，该行基于是否单击第一个按钮而有条件地呈现（使用jsx）。最后两行的设置相同。

我的HTML：

<div className='wrapper'>
  <button className='button1'/>
  <button className='button2'/>
  {isDiv1Showing && (
  <div className='div1'>Content</div>
  )}
  <button className='button3'/>
  <button className='button4'/>
  {isDiv2Showing && (
  <div className='div2'>Content</div>
  )}
</div>

我的CSS看起来像这样：

.wrapper {
  display: grid;
  grid-template-columns: 5fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
  "a1 a2"
  "a3 a3"
  "b1 b2"
  "b3 b3"
  ;
}

.button1 {
  grid-area: 'a1';
}

.button2 {
  grid-area: 'a2';
}

.div1 {
  grid-area: 'a3';
}

.. and the same for the next two rows.

我期望会发生什么

方案1：未按下任何按钮：

Row1; button1 button2
Row2: 
Row3: button3 button4
Row4: 

方案2：已按下第1行中的按钮：

Row1; button1 button2
Row2: div1
Row3: button3 button4
Row4: 

虽然这不会发生-而是发生：

方案1：

Row1; button1 button2
Row2: button3 button4
Row3: 
Row4: 

方案2

Row1; button1 button2
Row2: <div/> button3
Row3: button4
Row4: 

我想我不完全了解网格模板区域的行为，特别是当区域为空时。同样令我惊讶的是，button3和button4离开了它们分配的网格区域以占用a3中的空间，我想知道如何避免这种情况？

我知道我可以通过其他方式（例如flexbox或其他网格设置。我的示例显然是一个简化的示例，我的特定问题包括更多的行，这就是为什么我要使用网格。

Answer 1

之所以不尊重grid-area属性，是因为您将它们用引号引起来。他们应该看起来像这样：

.button1 {
  grid-area: a1;
}
.button2 {
  grid-area: a2;
}
.div1 {
  grid-area: a3;
}

此外，网格行高度折叠的原因是，您缺少grid-auto-rows属性：当该行中的所有元素都不包含内容时（例如，第二行中未显示的.div1），折叠到0的高度。您将需要使用它来指定最小高度，例如grid-auto-rows: 20px及其类似的内容。

.wrapper {
  display: grid;
  grid-template-columns: 5fr 1fr;
  grid-auto-rows: 20px;
  grid-template-areas:
  "a1 a2"
  "a3 a3"
  "b1 b2"
  "b3 b3"
  ;
}

.button1 {
  grid-area: a1;
}

.button2 {
  grid-area: a2;
}

.div1 {
  grid-area: a3;
}

.button3 {
  grid-area: b1;
}

.button4 {
  grid-area: b2;
}

.div2 {
  grid-area: b3;
}

<div class='wrapper'>
  <button class='button1'>Btn1</button>
  <button class='button2'>Btn2</button>

  <!-- Let's choose not to render it -->
  <!--
  <div class='div1'>Content</div>
  -->

  <button class='button3'>Btn3</button>
  <button class='button4'>Btn4</button>

  <div class='div2'>Content</div>

</div>