用CSS网格无法实现网格布局[重复]

Question

这个问题在这里已有答案：

• Make a div span two rows in a grid 2回答

在尝试了解有关CSS网格的更多信息时，我正在尝试创建一些不同的网格布局。我想要创建的是以下内容：

这是这一步：

.wrapper {
    display: grid;
    grid-gap: 15px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(8, 1fr);
}

.wrapper .first_box {
    grid-column-start: 2;
    grid-column-end: 4;

    grid-row-start: 1;
    grid-row-end: 7;
}

.wrapper .second_box {
    grid-column-start: 1;
    grid-column-end: 2;

    grid-row-start: 1;
    grid-row-end: 4;

}

.wrapper .third_box {
    grid-column-start: 4;
    grid-column-end: 5;

    grid-row-start: 1;
    grid-row-end: 4;
}

.wrapper .fourth_box {
    grid-column-start: 1;
    grid-column-end: 2;
}

.wrapper .fifth_box {
    grid-column-start: 4;
    grid-column-end: 5;
}

.wrapper div {
    border: 2px solid rgb(233,171,88);
    border-radius: 5px;
    background-color: rgba(233,171,88,.5);
    padding: 1em;
    color: #d9480f;
}

<div class="wrapper">
  <div class="first_box">
  First Box
  </div>
  
   <div class="second_box">
  Second Box
  </div>
  
   <div class="third_box">
    Third Box
  </div>
  
   <div class="fourth_box">
  Fourth Box
  </div>
  
    <div class="fifth_box">
  Fifth Box
  </div>
  
</div>

此时，前两个框看起来是正确的。问题是当我尝试设置左下方框和右下方框的行时。对于这两个盒子，我将grid-row-start设置为左上方和右上方框结束的位置，并且我将grid-row-end设置为大框结束的位置。这会导致框恢复为默认大小：

.wrapper {
    display: grid;
    grid-gap: 15px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(8, 1fr);
}

.wrapper .first_box {
    grid-column-start: 2;
    grid-column-end: 4;

    grid-row-start: 1;
    grid-row-end: 7;
}

.wrapper .second_box {
    grid-column-start: 1;
    grid-column-end: 2;

    grid-row-start: 1;
    grid-row-end: 4;

}

.wrapper .third_box {
    grid-column-start: 4;
    grid-column-end: 5;

    grid-row-start: 1;
    grid-row-end: 4;
}

.wrapper .fourth_box {
    grid-column-start: 1;
    grid-column-end: 2;
    
    grid-row-start: 4;
    grid-row-end: 7;
}

.wrapper .fifth_box {
  
    grid-column-start: 4;
    grid-column-end: 5;
    
    grid-row-start: 4;
    grid-row-end: 7;
 
}

.wrapper div {
    border: 2px solid rgb(233,171,88);
    border-radius: 5px;
    background-color: rgba(233,171,88,.5);
    padding: 1em;
    color: #d9480f;
}

<div class="wrapper">
  <div class="first_box">
  First Box
  </div>
  
   <div class="second_box">
  Second Box
  </div>
  
   <div class="third_box">
    Third Box
  </div>
  
   <div class="fourth_box">
  Fourth Box
  </div>
  
    <div class="fifth_box">
  Fifth Box
  </div>

</div>

我不确定为什么会这样。如果有人能帮我理解为什么会这样，我将不胜感激。

Answer 1

请注意您对grid-row-start和grid-column-end的使用 - 它们指的是网格线。这里有8列 - 因此网格线的编号从0到9.请参见下面的更正演示：

.wrapper {
    display: grid;
    grid-gap: 15px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(8, 1fr);
}

.wrapper .first_box {
    grid-column-start: 2;
    grid-column-end: 4;

    grid-row-start: 1;
    grid-row-end: 9; /* CHANGED */
}

.wrapper .second_box {
    grid-column-start: 1;
    grid-column-end: 2;

    grid-row-start: 1;
    grid-row-end: 5; /* CHANGED */

}

.wrapper .third_box {
    grid-column-start: 4;
    grid-column-end: 5;

    grid-row-start: 1;
    grid-row-end: 5; /* CHANGED */
}

.wrapper .fourth_box {
    grid-column-start: 1;
    grid-column-end: 2;
    
    grid-row-start: 5; /* CHANGED */
    grid-row-end: 9; /* CHANGED */
}

.wrapper .fifth_box {
  
    grid-column-start: 4;
    grid-column-end: 5;
    
    grid-row-start: 5; /* CHANGED */
    grid-row-end: 9; /* CHANGED */
 
}

.wrapper div {
    border: 2px solid rgb(233,171,88);
    border-radius: 5px;
    background-color: rgba(233,171,88,.5);
    padding: 1em;
    color: #d9480f;
}

<div class="wrapper">
  <div class="first_box">
  First Box
  </div>
  
   <div class="second_box">
  Second Box
  </div>
  
   <div class="third_box">
    Third Box
  </div>
  
   <div class="fourth_box">
  Fourth Box
  </div>
  
    <div class="fifth_box">
  Fifth Box
  </div>

</div>

---

当您将first-column跨越到不同的行时，由于您只为每行指定了1fr并且没有为网格容器设置高度，所以它将采用网格布局算法认为合适的height。

---

But if you see closely you can see a pattern - the smallest box is occupying only as much space as its content. So we can talk ratios here.

---

在所有非柔性轨道尺寸函数达到其最大值之后，剩余空间的分布发生。从可用空间中减去这些行或列的总大小，产生剩余空间，然后在弹性大小的行和列之间按其灵活因子的比例进行划分。

MDN - 上面的重点是我的。

在第一种情况下，第一和第三列具有3：1的高度比，而第二列延伸6行。 （3：1比例中的1是与其内容一样高的盒子）

类似地，在第二种情况下，第一和第三列具有3：3的高度比，而第二列延伸6行。对于第一列和第三列，该比率可简化为1：1，对于第二列，该比率可简化为2：1。

Answer 2

所以你的问题是当你将行属性赋给底部框时盒子缩小的原因。

要理解这一点，假设网格将采用它可以构造的最小高度，这是默认网格大小的关键思路。

现在在第一种情况下，底部框将默认为1行，该行所需的最小尺寸将是文本的大小，因此底部框获得文本高度的大小（稍微大于那个，但你明白了），所以一个第一种情况下的行由文本高度定义，因此上面的框大，因为它们跨越3行。

现在在第二种情况下

当您为底部框分配3行时，现在3行所需的最小高度是文本的高度，而3行的高度等于文本的高度，因此跨越3行的顶部框具有减小的高度，其由文本的高度控制现在

在这里阅读有关尺寸调整行为的信息https://www.w3.org/TR/css-grid-1/#intrinsic-sizes