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 行。所有行都是隐式（根据需要创建）。

隐式行的大小由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的外观如下：

请注意如何将第一行分为三行，并且网格现在总共有五行（因为span 3 =现有行+ 2）。

让它grid-row: span 10看起来更好：

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

顺便说一下，这就是问题的这一部分的解释：

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

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

如果删除网格间隙，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;
}

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

2。定义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;
}

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

3。定义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;
}

<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 2

您的代码没有为行定义。添加后，您会看到跨度明显达到了预期的效果。

在此之前，您的虚拟行会折叠，因为它们本身没有内容，并且已调整为默认大小auto。

grid-template-rows: repeat(5, 24px);

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 24px);
  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 3

您需要提供有关网格按行外观的信息。

在父项上未设置console的情况下，子项上的grid-template-rows将在隐式网格上计算，并且默认情况下会自动调整大小（在高度尺寸中）。

设置grid-row: span 3将创建一个显式网格。

grid-template-rows

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 20px);
  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;
}

网格项目未按指定跨越

3 个答案:

显式和隐式行

第3项问题

解决方案