网格项未按指定范围跨越

Question

我正在尝试使网格项目（.item3）完全跨越并且向下3行。在按列对其进行跨接之后，将不会对行进行跨接。但是，如果我将行跨度值增加到4，它将起作用。但是，跨度只有2行而不是4行。这是代码。

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 10px;
  background: black;
}

.item {
  display: grid;
  border-radius: 2px;
  border: 1px solid red;
  background-color: var(--yellow);
}

.item3 {
  grid-column: 1 / -1;
  grid-row: span 3;
}

<div class="container">
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
  <div class="item item9">9</div>
  <div class="item item10">10</div>
</div>

Answer 1

很多。

但是，本质上，主要问题是容器中缺少额外的高度。

这是正在发生的事情：

显式和隐式行

---

这是您拥有的：

.container {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   grid-gap: 10px;
   background: black;
}

.item {
   display: grid;
   border-radius: 2px;
   border: 1px solid red;
   background-color: var(--yellow);
}

.item3 {
   grid-column: 1 / -1;
   grid-row: span 3;
}

.item规则对问题没有影响，因此我们仅出于说明目的保留边框。

.container {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   grid-gap: 10px;
   background: black;
}

.item3 {
   grid-column: 1 / -1;
   grid-row: span 3;
}

.item {
  border: 1px solid red;
}

因为尚未定义grid-template-rows或grid-template-areas，所以没有

explicit

行。所有行都是

implicit（根据需要创建）。

隐式行的大小由grid-auto-rows控制，其默认值为auto（内容的大小）。因此，每行的高度当前由HTML中文本的大小（数字）定义。

数字是不可见的，因为背景和文本均为黑色。为了更好地了解行高的来源，让我们将文本颜色更改为白色。

.container {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   grid-gap: 10px;
   background: black;
   color: white; /* new */
}

这里是完整的代码：

 
.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 10px;
  background: black;
  color: white;
}

.item3 {
  grid-column: 1 / -1;
  grid-row: span 3;
}

.item {
  border: 1px solid red;
}
<div class="container">
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
  <div class="item item9">9</div>
  <div class="item item10">10</div>
</div>
如上所述，隐式行的默认高度为auto。这意味着，如果未指定grid-auto-rows，并且网格项目中没有内容，则行将折叠：
 
.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 10px;
  background: black;
  color: white;
}

.item3 {
  grid-column: 1 / -1;
  grid-row: span 3;
}

.item {
  border: 1px solid red;
}
<div class="container">
  <div class="item item3"></div>
  <div class="item item4"></div>
  <div class="item item5"></div>
  <div class="item item6"></div>
  <div class="item item7"></div>
  <div class="item item8"></div>
  <div class="item item9"></div>
  <div class="item item10"></div>
</div>
容器中的剩余高度来自边框厚度和10px的网格间隙。删除那些以完全折叠（网格消失）。
 
.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* grid-gap: 10px; */
  background: black;
  color: white;
}

.item3 {
  grid-column: 1 / -1;
  grid-row: span 3;
}

.item {
  /* border: 1px solid red; */
}
<div class="container">
  <div class="item item3"></div>
  <div class="item item4"></div>
  <div class="item item5"></div>
  <div class="item item6"></div>
  <div class="item item7"></div>
  <div class="item item8"></div>
  <div class="item item9"></div>
  <div class="item item10"></div>
</div>
第3项问题
.item3 {
  grid-column: 1 / -1;
  grid-row: span 3;
}
当您命令item3跨越三行时，它不会跨越现有的三行，因为这些音轨已被占用。但是，如果删除grid-column命令，则span 3有效。
 
.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 10px;
  background: black;
  color: white;
}

.item3 {
  /* grid-column: 1 / -1; */
  grid-row: span 3;
}

.item {
  border: 1px solid red;
}
<div class="container">
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
  <div class="item item9">9</div>
  <div class="item item10">10</div>
</div>
让我们回到我的第一行一分钟：
是的。但是也确实有三个新行
创建

。网格仅创建了这三行在第一行内。

这是使用item3的外观：

Firefox's Grid Inspector注意第一行如何分成三行，并且网格现在总共有五行（因为 =现有行+ 2）。

为了更好看，让它设为span 3：

grid-row: span 10

细分后的第一行的高度完全来自，在每个新行之间加10px。

这是问题的这一部分的解释：

如果我将行跨度值增加到4，它将起作用。但是，跨度只有2行，而不是4行。

您实际上只是看到10px行间距堆叠的效果。

如果删除网格间隙，grid-gap仍将生成细分的行，但是这些新行将不会更改第一行的高度。他们将调整以适合内部。

再次与span使用相同的布局，但没有span 10：

grid-gap

解决方案

这里是解决问题的三种方法。

---

1。给容器一些高度。

如果您为容器提供额外的高度–意味着高度超出了内容所需要的高度– 将有一定的工作空间。

grid-row: span 3

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 10px;
  background: black;
  color: white;
  height: 250px; /* new */
}

.item3 {
  grid-column: 1 / -1;
  grid-row: span 3;
}

.item {
  border: 1px solid red;
}

2。定义<div class="container">
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
  <div class="item item9">9</div>
  <div class="item item10">10</div>
</div>。

如果将grid-auto-rows的高度设置为控制隐式行的高度，则grid-auto-rows也将起作用。

grid-row: span 3

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 50px; /* new */
  grid-gap: 10px;
  background: black;
  color: white;
}

.item3 {
  grid-column: 1 / -1;
  grid-row: span 3;
}

.item {
  border: 1px solid red;
}

3。定义<div class="container">
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
  <div class="item item9">9</div>
  <div class="item item10">10</div>
</div>。

如果知道容器中需要多少行，请将数字和高度设置为grid-template-rows，它控制显式行的高度。

grid-template-rows

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 50px); /* new */
  grid-gap: 10px;
  background: black;
  color: white;
}

.item3 {
  grid-column: 1 / -1;
  grid-row: span 3;
}

.item {
  border: 1px solid red;
}

Answer 2

隐式网格

Answer 3