相关疑难解决方法(0)

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

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

css css3 css-grid

8
推荐指数
3
解决办法
5657
查看次数

3列CSS网格布局中取半宽

我们可以通过 CSS 网格创建如下图所示的布局吗?

在此输入图像描述

css css-grid

3
推荐指数
1
解决办法
1万
查看次数

标签 统计

css ×2

css-grid ×2

css3 ×1