.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px;
grid-auto-rows: 60px;
grid-gap: 15px;
}
.col {
background-color: tomato;
}Run Code Online (Sandbox Code Playgroud)
<div class="grid">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>Run Code Online (Sandbox Code Playgroud)
这将创建2行,第一行是100px高度,第二行是使用60px高度自动创建的.第二行中的2列具有1fr宽度.
这是否可以通过CSS Grid/Flexbox在第2行中水平居中2列?即每行有不同数量的列.
我试图在浏览器中为CSS Grid框架解决一个简单的用例.如果您使用Flexbox构建网格,这是非常有问题的.
但是我可以用CSS Grid实现吗?
这是我想要实现的CodePen演示.