Question

我一直在尝试创建一个响应式网格布局，并且几乎可以理解。我可以做到这一点：

.container {
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-template-rows: repeat(auto-fit, minmax(300px, 1fr));
}

如果我的网格中有4个项目，结果看起来像这样：

=============
= 1 = 2 = 3 =
= 4 =   =   =
=============

问题是我希望第四个单元格（在这种情况下，但可能是另一个，具体取决于我的网格中有多少个项目）来填充剩余的列，如下所示：

=============
= 1 = 2 = 3 =
= 4 = 4 = 4 =
=============

我知道这可以在flex中完成，但是如果可能的话，我真的很想用grid来完成。

谢谢。

.grid {
  display: grid;
  grid-gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
}

.grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  background-color: rgba(0,0,0,0.25);
}

<div class="grid">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>

Answer 1

使用CSS-Grid全自动且响应迅速，这是不可能的。我的建议是使用Bootsrap的Grid系统。请参阅文档here

如何填充CSS网格中的其余列

1 个答案: