css网格项目未按指定跨越

问题描述 投票：2回答：4

我正在尝试使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>
css css-grid
4个回答
0
投票

此布局中有很多。

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

这是正在发生的事情：

显式和隐式行

这是您拥有的：

.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

注意第一行如何分成三行，并且网格现在共有五行（跨度3 =现有行+ 2）。

为了更好看，让它设为enter image description here：

grid-row: span 10

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

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

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

grid-gap

解决方案

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

1。给容器一些高度。

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

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;
}
您的代码没有为行定义。添加后，您会看到跨度明显达到了预期的效果。
在此之前，您的虚拟行会折叠，因为它们本身没有内容，因此它们的大小默认为<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-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>，在子级上的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;
}
 
我记得定义了grid-template-rows，但是没有用。在提出问题之前，我确实尝试了一切。但是，今天早上我添加了grid-template-rows，这很好........]
-1
投票
您的代码没有为行定义。添加后，您会看到跨度明显达到了预期的效果。
-1
投票
您需要提供有关网格按行外观的信息。
-1
投票
我记得定义了grid-template-rows，但是没有用。在提出问题之前，我确实尝试了一切。但是，今天早上我添加了grid-template-rows，这很好........]
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.