CSS Grid不需要的列自动添加 [英] CSS Grid unwanted column added automatically

问题描述

尝试使用不同的类名通过CSS Grid在两个单独的行中对项目进行分组.它可以正常工作，直到红色"组中的元素没有预定义的行(本例为3)为止.

Trying to group items in two separate line by CSS Grid using different class names. It works fine until in "red" group have no more elements then predefined rows (this case 3).

我可以以某种方式将第四个红色"元素放在新行中吗?

Can I somehow put the 4th "red" element in new row?

如果只有3个红色"元素，则一切正常.

If there is only 3 "red" element, everything works fine.

ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
  grid-row-start: 5;
}

<ul>
  <li class="blue">
    <h2>1</h2>
  </li>
  <li class="red">
    <h2>2</h2>
  </li>
  <li class="blue">
    <h2>3</h2>
  </li>
  <li class="blue">
    <h2>4</h2>
  </li>
  <li class="red">
    <h2>5</h2>
  </li>
  <li class="red">
    <h2>6</h2>
  </li>
  <!-- If you delete this (or any other "red") "li" element then it's working fine -->
  <li class="red">
    <h2>7</h2>
  </li>
  <li class="blue">
    <h2>8</h2>
  </li>
</ul>

推荐答案

您正在使用grid-row-start: 5将所有red元素指定到第五行.是的，红色元素被放置到第五行，并且由于您未指定显式行定义(例如，使用grid-template-rows)而无法立即看到.

You are specifying all the red elements into the fifth row by using grid-row-start: 5. Yes, the red elements are placed to the fifth row, and that is not immediately visible as you haven't specified an explicit row definition (say using grid-template-rows).

您可以使用grid-auto-rows: 50px之类的内容来定义隐式行定义，并查看red元素实际上位于第五行:

You can define the implicit row definition using something like grid-auto-rows: 50px and see that the red element are actually in the fifth row:

ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 50px; /* specify row height */
  list-style: none; /* remove bullets */
  padding: 0; /* remove default ul padding */
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
  grid-row-start: 5;
}

li {
  border: 1px solid #bbb; /* border for illustration */
}

<ul>
  <li class="blue">
    <h2>1</h2>
  </li>
  <li class="red">
    <h2>2</h2>
  </li>
  <li class="blue">
    <h2>3</h2>
  </li>
  <li class="blue">
    <h2>4</h2>
  </li>
  <li class="red">
    <h2>5</h2>
  </li>
  <li class="red">
    <h2>6</h2>
  </li>
  <!-- If you delete this (or any other "red") "li" element then it's working fine -->
  <li class="red">
    <h2>7</h2>
  </li>
  <li class="blue">
    <h2>8</h2>
  </li>
</ul>

现在您的问题是，为什么第四红色项目位于同一行中-因为您已将所有<​​em> 放置在同一第五行中.使用自动宽度创建隐式网格列-您可以使用grid-auto-columns:

Now your question is why the fourth red item is in the same row - because you have placed all of them in the same fifth row. An implicit grid column is created with auto width - you can control this width using grid-auto-columns:

ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 50px; /* specify row height */
  grid-auto-columns: 100px; /* specify column width */
  list-style: none; /* remove bullets */
  padding: 0; /* remove default ul padding */
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
  grid-row-start: 5;
}

li {
  border: 1px solid #bbb; /* border for illustration */
}

<ul>
  <li class="blue">
    <h2>1</h2>
  </li>
  <li class="red">
    <h2>2</h2>
  </li>
  <li class="blue">
    <h2>3</h2>
  </li>
  <li class="blue">
    <h2>4</h2>
  </li>
  <li class="red">
    <h2>5</h2>
  </li>
  <li class="red">
    <h2>6</h2>
  </li>
  <!-- If you delete this (or any other "red") "li" element then it's working fine -->
  <li class="red">
    <h2>7</h2>
  </li>
  <li class="blue">
    <h2>8</h2>
  </li>
</ul>

您可以执行以下操作以将它们分组:

You can do this to group them:

• 将order: 1设置为 red 项目，以使它们始终排在 blue 之后，

• set order: 1 to the red items so that they always come after the blue ones,

使用grid-column: 1将第一个red元素设置为第一列，其余元素将使用grid-column: auto自动放置.

set the first red element to the first column using grid-column: 1 and the rest will be auto-placed using grid-column: auto.

请参见下面的演示

ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  list-style: none; /* remove bullets */
  padding: 0; /* remove default ul padding */
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
  order: 1; /* red items have higher order */
}

.red { /* first red element into first column */
  grid-column: 1;
}

.red ~ .red { /* subsequent red elements auto-placed */
  grid-column: auto;
}

li {
  border: 1px solid #bbb; /* border for illustration */
}

<ul>
  <li class="blue">
    <h2>1</h2>
  </li>
  <li class="red">
    <h2>2</h2>
  </li>
  <li class="blue">
    <h2>3</h2>
  </li>
  <li class="blue">
    <h2>4</h2>
  </li>
  <li class="red">
    <h2>5</h2>
  </li>
  <li class="red">
    <h2>6</h2>
  </li>
  <!-- If you delete this (or any other "red") "li" element then it's working fine -->
  <li class="red">
    <h2>7</h2>
  </li>
  <li class="blue">
    <h2>8</h2>
  </li>
</ul>

---

显式网格是您使用grid-template-columns，grid-template-rows，grid-template-areas和相关的速记属性定义的网格-请参见以下W3C摘录:

Explicit grid is the grid that you define using grid-template-columns, grid-template-rows, grid-template-areas and related shorthand properties - see excerpts below from W3C:

Explicit Grid (W3C)

三个属性grid-template-rows，grid-template-columns和 网格模板区域共同定义了网格的显式网格 容器.由于放置了网格项，最终网格可能会变大 在显式网格之外；在这种情况下，隐式轨道将是 创建后，这些隐式轨道将通过grid-auto-rows和 网格自动列属性.

The three properties grid-template-rows, grid-template-columns, and grid-template-areas together define the explicit grid of a grid container. The final grid may end up larger due to grid items placed outside the explicit grid; in this case implicit tracks will be created, these implicit tracks will be sized by the grid-auto-rows and grid-auto-columns properties.

---

请参见下面的示例和 explicit 2x2网格，稍后我们将再次介绍:

---

See an example below of and explicit 2x2 grid which we will come back to shortly:

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 50px 50px;
  grid-gap: 5px;
}
/* styles */
.wrapper > div { border: 1px solid cadetblue; background: lightblue; display: flex; justify-content: center; align-items: center;}

<div class="wrapper">
  <div>1</div><div>2</div><div>3</div><div>4</div>
</div>

如果在网格容器的内部 中有更多内容或元素，但在显式网格定义外部中有 ，则该 >是所谓的隐式网格的一部分.

If you have more content or elements inside the grid container but outside the explicit grid definition, then that is part of what is called as the implicit grid.

您可以使用grid-auto-rows和grid-auto-columns属性控制隐式网格的大小.

You control the size of your implicit grid using grid-auto-rows and grid-auto-columns properties.

Implicit Grid (W3C)

grid-template-rows，grid-template-columns和grid-template-areas 属性定义固定数量的轨道，这些轨道形成显式 网格.当网格项位于这些边界之外时，网格 容器通过添加隐式网格线来生成隐式网格轨迹 到网格.这些线与显式网格一起形成 隐式网格. grid-auto-rows和grid-auto-columns属性 调整这些隐式网格轨迹的大小.

The grid-template-rows, grid-template-columns, and grid-template-areas properties define a fixed number of tracks that form the explicit grid. When grid items are positioned outside of these bounds, the grid container generates implicit grid tracks by adding implicit grid lines to the grid. These lines together with the explicit grid form the implicit grid. The grid-auto-rows and grid-auto-columns properties size these implicit grid tracks.

---

如果在上面的示例中有更多网格项，则可以看到创建的隐式行-这些行的大小可以使用grid-auto-rows属性进行设置:

---

You can see implicit rows created if you have more grid items in the example above - these rows can be sized using grid-auto-rows property:

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 50px 50px;
  grid-gap: 5px;
  grid-auto-rows: 25px; /* size of implicit rows */
}
/* styles */
.wrapper > div { border: 1px solid cadetblue; background: lightblue; display: flex; justify-content: center; align-items: center;}

<div class="wrapper">
  <div>1</div><div>2</div><div>3</div><div>4</div>
  <div>5</div><div>6</div><div>7</div><div>8</div>
</div>

要查看创建的隐式列，您可以尝试在第二列之外放置一些网格项-可以使用grid-auto-columns属性来调整这些行的大小.查看如何创建新列以及网格的行为:

To have a look at implicit columns created you can try placing some grid items beyond the second column - these rows can be sized using grid-auto-columns property. See how a new column is created and how the grid behaves:

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 50px 50px;
  grid-gap: 5px;
  grid-auto-rows: 25px; /* size of implicit rows */
  grid-auto-columns: 25px; /* size of implicit columns */
}

div:nth-child(5), div:nth-child(6) {
  grid-column: 3; /* place in thrid column */
}

/* styles */
.wrapper > div { border: 1px solid cadetblue; background: lightblue; display: flex; justify-content: center; align-items: center;}

<div class="wrapper">
  <div>1</div><div>2</div><div>3</div><div>4</div>
  <div>5</div><div>6</div><div>7</div><div>8</div>
</div>

这篇关于CSS Grid不需要的列自动添加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！