显式网格与隐式网格

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>

隐式列

现在您的问题是为什么第四红色项目位于同一行中-因为您已将所有<em> 放置在同一第五行中。使用自动宽度创建隐式网格列-您可以使用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 项目，以便它们始终排在 blue 项目之后，
使用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-template-rows，grid-template-columns和   网格模板区域共同定义了网格的显式网格   容器。由于放置了网格项，最终网格可能会变大   在显式网格之外；在这种情况下，隐式轨道将是   创建后，这些隐式轨道将通过grid-auto-rows和   网格自动列属性。

请参见下面的示例和 explicit 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-rows和grid-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>

CSS Grid不需要的列会自动添加

1 个答案:

隐式行

隐式列

解决方案

显式网格与隐式网格

显式网格

隐式网格