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

请注意您对df['rank'] = df['a'][-5:].rank()和grid-row-start的使用-它们是指网格线。您在此处有8列-因此网格线的编号从0到9。请参见下面的更正演示：

grid-column-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: 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。

但是，如果您看得很近，您会看到一个图案-最小的盒子仅占据其内容的空间。所以我们可以在这里讨论比率。

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

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

上了解有关尺寸调整行为的信息

无法使用CSS网格实现网格布局

2 个答案: