CSS Grid不需要的列自动添加

Question

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

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

如果只有3个“红色”元素，则一切正常。

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>

Answer 1

您正在使用来将所有red元素指定到第五行grid-row-start: 5。是的，红色元素放置在第五行，并且由于您未指定显式的行定义（例如使用grid-template-rows），因此不会立即可见。

隐式行

您可以使用类似的方法定义隐式行定义，grid-auto-rows: 50px然后查看red元素实际上是否位于第五行：

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>

隐式列

现在你的问题是，为什么第四红色产品在同一行中-因为你已经放置在同一第五行中所有的人。使用自动宽度创建一个隐式网格列 -您可以使用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>

解

您可以这样做将它们分组：

• 设置order: 1为红色项，以便它们总是紧随蓝色项之后，

• 使用将第一red元素设置为第一列grid-column: 1，其余元素将使用自动放置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 (W3C)

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

请参阅下面的示例和显式 2x2网格，我们稍后将返回：

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

隐式网格

如果您有更多的内容或元素内部网格容器，但外面的明确定义格，那么这就是所谓的部分隐格。

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

Implicit Grid (W3C)

的grid-template-rows，grid-template-columns和grid-template-areas 属性定义形成该明确的格磁道的固定数。当网格项位于这些边界之外时，网格容器通过向网格添加隐式网格线来生成隐式网格轨迹。这些线与显式网格一起形成隐式网格。在grid-auto-rows和grid-auto-columns性质大小这些隐格曲目。

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

.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属性来调整这些行的大小。查看如何创建新列以及网格的行为：

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