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网格实现它吗？

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