CSS 如果容器为空，则创建元素取 1,5 space 的网格

Question

我有这样的容器：

目前元素5后面有一个空的case。所以我想居中第二行的元素:

对于我已经完成的代码：

      .country-grid
        display: grid
        grid-template-columns: repeat(auto-fill,minmax(320px, 1fr))

Answer 1

这取决于确切的用例以及您期望的网格项数。如果你知道你总是会有 5 个项目，你可以只设置特定数量的列并偏移第 4 个项目，如下所示：

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.grid-item {
  grid-column: span 2;
}

.grid-item:nth-child(4) {
  grid-column: 2 / span 2;
}

如果布局可以包含任意数量的项目，并且您正在寻找一种更流畅的包装方法，那么我建议为此使用 flex，因为它的设置要简单得多像这样对齐：

.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.flex-item {
  width: calc(100% / 3);
  min-width: 320px;
}

CSS 如果容器为空，则创建元素取 1,5 space 的网格

CSS create grid with element take 1,5 space if container empty

css

css-grid