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

Question

在尝试了解有关 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。

---

但是，如果您仔细观察，您会发现一种模式——最小的盒子只占用与其内容一样多的空间。所以我们可以在这里讨论比率。

---

剩余空间的分配发生在所有非柔性轨道之后 尺寸调整功能已达到最大值。这样的总规模 从可用空间中减去行或列，得到 剩余空间，然后在弹性大小的行和 列与其弹性系数成比例。

MDN - 上面的重点是我的。

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

在第二种情况下类似，但是第一列和第三列的高度比为 3:3，而第二列延伸 6 行。第一列和第三列的比例可以简化为 1:1，第二列的比例可以简化为 2。

Answer 2

所以你的问题是当你将行属性赋予底部框时，为什么框会缩小。

为了理解这一点，假设网格将采用 可以构建的最小高度，这是网格默认大小的关键思想。

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

现在是第二种情况

当您也将 3 行分配给底部框时，现在 3 行所需的最小高度是文本的高度，底部 3 行的高度等于文本 因此也跨越 3 行的顶部框的高度降低了，现在由文本的高度控制

在此处阅读有关大小调整行为https://www.w3.org/TR/css-grid-1/#intrinsic-sizes