Question

我需要将列对齐到中心，但没有运气。我尝试了proty-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网格？这不是它的意思。网格是flex的补充，而不是替代。

这里的正确答案是使用display: flex;代替display: grid;。您可以在弹性容器周围使用网格，或者对{strong>相同的区域中的项目使用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>

CSS Grid列对齐

1 个答案: