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

这将创建2行,第一行是100px高度,第二行是使用60px高度自动创建的.第二行中的2列具有1fr宽度.

这是否可以通过CSS Grid/Flexbox在第2行中水平居中2列？即每行有不同数量的列.

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

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

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

你在问这个:

我可以在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;
}