我可以在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列？即每行有不同数量的列.

我试图在浏览器中为CSS Grid框架解决一个简单的用例.如果您使用Flexbox构建网格,这是非常有问题的.

但是我可以用CSS Grid实现吗？

这是我想要实现的CodePen演示.

Answer 1

你在问这个:

我可以在CSS网格中每行使用不同数量的列吗？

但是你说的是:

这是否可以通过CSS Grid/Flexbox在第2行中水平居中2列？

看起来你陷入了经典的XY问题:你专注于你的尝试解决方案,而不是你的实际问题.

是的,可以在CSS Grid中居中列(和网格项和内容).(请参阅此处的各种方法:以CSS网格为中心)

不,在CSS网格或每个网格中,每行都不可能有不同数量的列.否则,您没有网格.

由于外观通常在布局中非常重要,因此您可以使用CSS Grid在第一行中构建看起来像三个"列"的东西,在第二行中构建两个"列" - 居中.

在下面的示例中,我将网格容器中的水平空间划分为12列.然后我使用Grid的基于行的放置功能来定位和调整项目的大小.

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

这是使用Firefox DevTools的样子:

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

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

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