CSS 网格列对齐

Question

我需要将列居中对齐，但没有成功。我尝试了 justify-content、justify-items、align-items，但没有任何效果。

.row {
  display: grid;
  grid-template-columns: repeat(12,1fr);
  justify-content: center;
  align-items:center;
}

.col-2 {
  grid-column-start: span 2;
}

.col-4 {
  grid-column-start: span 4;
}

这是基本演示 - https://jsfiddle.net/k0apdg5s/1/

编辑:我真正想要实现的是像这样将最后两个列对齐到网格中心 - http://jsfiddle.net/cez04sw4/2/

Answer 1

再次作为一个完整的答案:你为什么像使用 flex 一样使用 css 网格？这不是它的意思。 Grid 是对 flex 的补充，而不是替代。

此处的正确答案是使用 display: flex; 而不是 display: grid;。您可以在 flex-container 周围使用网格，或者对 同一 区域中的元素使用 justify-items 或 justify-self。

这是一个正确的工作示例:

img {
  max-width: 100%;
  display: block;
}
.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items:center;
}

.col-2 {
  width: 16.66%; /* 100/6 */
}

.col-4 {
  width: 33.33%; /* 100/3 */
}

<div class="row">
  <div class="col col-2">
    <img src="//placehold.it/240x240" />
  </div>
  <div class="col col-2">
    <img src="//placehold.it/240x240" />
  </div>
  <div class="col col-2">
    <img src="//placehold.it/240x240" />
  </div>
  <div class="col col-2">
    <img src="//placehold.it/240x240" />
  </div>
  <div class="col col-2">
    <img src="//placehold.it/240x240" />
  </div>
  <div class="col col-2">
    <img src="//placehold.it/240x240" />
  </div>
  <div class="col col-2">
    <img src="//placehold.it/240x240" />
  </div>
  <div class="col col-2">
    <img src="//placehold.it/240x240" />
  </div>
  <div class="col col-2">
    <img src="//placehold.it/240x240" />
  </div>
</div>