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;。您可以在弹性容器周围使用网格，或将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>