无法使用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>

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

- Logan Phillips

---

这是我在Chrome中看到的 https://i.imgur.com/Nw2urmB.png。这是你想要实现的吗？ - Jorge Fuentes González

Answer 1

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

Original Answer翻译成"最初的回答"

.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。

---

- kukkuz

Answer 2

所以你的问题是为什么在给下方盒子行属性后会导致盒子缩小。

要理解这个问题，首先假设网格将采用可以构建的最小高度，这是网格默认大小的关键思想。

现在在第一个案例中，下方的盒子默认将占据1行，并且该行所需的最小尺寸将是文本的大小，因此底部的盒子将具有文本高度的大小（略大于该值，但你能明白），因此第一种情况下，一行的定义为文本的高度，因此上面的盒子跨越3行，因此它们更大。

现在在第二种情况下，当你也将3行分配给底部的盒子时，现在3行所需的最小高度就是文本的高度，因此底部的3行的高度等于文本的高度，因此顶部的盒子也跨越3行，其高度减小，并且受文本高度控制。

在此处了解关于尺寸行为的更多信息 https://www.w3.org/TR/css-grid-1/#intrinsic-sizes

- ashish singh