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

Question

null

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

null

这将创建2行，第一行高度为100px，第二行高度为60px。第二行中的2列具有1fr宽度。

是否可以通过CSS网格/FlexBox将第2行的2列水平居中？即。每行的列数不同。

我正试图解决浏览器中CSS网格框架的一个琐碎的使用问题。如果使用FlexBox构建网格，这是很容易实现的。

但是我能用CSS网格实现它吗？

这里是一个我试图实现的代码本演示。

Answer 1

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

如果您的不同行数是对称的或遵循某种模式，那么您可以遵循michael_b的建议，基于公分母构建网格，并以马赛克样式填充网格区域。这与当前的flexbox解决方案一样不简单，但一旦更多的浏览器实现了flexbox碎片化，flexbox应该成为网格之外的明显选择。