CSS 网格中的每行可以有不同数量的列吗？

Question

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px;
  grid-auto-rows: 60px;
  grid-gap: 15px;
}

.col {
  background-color: tomato;
}

<div class="grid">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

这会创建 2 行，第一行是 100px 高度，第二行是自动创建的 60px 高度。第二行中的 2 列的宽度为 1fr。

是否可以通过 CSS Grid/Flexbox 将第 2 行的 2 列水平居中？ IE。每行有不同数量的列。

我一直在尝试解决浏览器中 CSS 网格框架的一个简单用例。如果您使用 Flexbox 构建网格，这很容易实现。

但是我可以用 CSS 网格实现吗？

这是我正在努力实现的 CodePen demo。

Answer 1

如果您的行有不同数量的单元格，但这些单元格并未全部布置在一个二维（行和列）上 space，您就没有网格。根据定义，网格包含固定数量的行和列，以及跨越一个或多个行和列的单元格。也许你会有多个异构网格，每行一个，但这只会破坏网格的全部意义，真的。

如果您的不同行数是对称的或遵循某种模式，您可以遵循 Michael_B 的建议，即基于公分母构建网格并以马赛克样式填充网格区域。这与目前的 flexbox 解决方案一样重要，但一旦更多浏览器实现 flexbox fragmentation，flexbox 应该成为网格的明显选择，因为它应该是。

Answer 2

你总是可以这样尝试：

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: [col] 100px [col] 100px [col] 100px [col] 100px;
  grid-template-rows: [row] auto [row] auto [row];
  background-color: #fff;
  color: #444;
}

.col {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.a {
  grid-column: col / span 2;
  grid-row: row;
}

.b {
  grid-column: col 3 / span 2;
  grid-row: row;
}

.c {
  grid-column: col;
  grid-row: row 2;
}

.d {
  grid-column: col 2 / span 3;
  grid-row: row 2;
}

.e {
  grid-column: col / span 4;
  grid-row: row 3;
}

<div class="container">
  <div class="col a">A</div>
  <div class="col b">B</div>
  <div class="col c">C</div>
  <div class="col d">D</div>
  <div class="col e">E</div>
</div>

代码笔：https://codepen.io/anon/pen/MOLrvq

Answer 3

你问的是这个：

Can I have a varying number of columns per row in a CSS Grid?

但是你是这样说的：

Is this possible via CSS Grid/Flexbox to horizontally center 2 columns in the 2nd row?

您似乎陷入了经典 XY Problem：您正专注于尝试的解决方案，而不是实际问题.

是的，可以在 CSS 网格中将列（以及网格项目和内容）居中。（在这里查看各种方法：）

不，在 CSS 网格或与此相关的任何网格中，每行的列数不可能不同。否则，你没有网格。

由于在布局中外观通常很重要，因此您可以在第一行构建看起来像三个 "columns"，在第二行看起来像两个 "columns" 的东西 – 居中 – 使用 CSS网格.

在下面的示例中，我将网格容器中的水平 space 划分为 12 列。然后我使用 Grid 的 line-based placement 功能来定位和调整项目的大小。

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 40px;
  grid-gap: 10px;
}

.col:nth-child(-1n + 3) {
  grid-column: span 4;
}
.col:nth-last-child(2) {
  grid-row-start: 2;
  grid-column: 3 / span 4;
}
.col:nth-last-child(1) {
  grid-row-start: 2;
  grid-column: 7 / span 4;
}
.col {
  background-color: tomato;
}

<div class="grid">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

codepen demo

这是使用 Firefox DevTools:

的样子

Answer 4

您可以通过嵌套网格来解决这个问题。 Grid-1（覆盖完整区域） Grid-2（覆盖第 1 行） Grid-3（覆盖第 2 行）

通过此设置，您可以缩短第 2 行的宽度。

Answer 5

如果有人遇到同样的麻烦，这就是我想出来的方法。我在一个容器中有两个 div，并希望它们有不同的列。所以我只是为每个 div 制作了一个网格。然后我放了 1fr 行，然后是我想要的列数。它就像一个魅力。

CSS 网格中的每行可以有不同数量的列吗？

Can I have a varying number of columns per row in a CSS grid?

css

css-grid