在CSS Grid中居中列

Question

在CSS Grid中居中列

7

我正在尝试使用原生CSS网格属性创建一个简单的CSS网格。它按照我想要的方式工作，但是我想创建一个实用类可以将网格列居中。

是否有一种方法可以创建__centered实用类，以便我可以将其应用于居中列？我知道我可以在列前添加空列div，但我想要更清洁的解决方案。

.l-wrap {
  width: 100%;
  max-width: 1196px;
  margin: 0 auto;
}

.l-grid {
  display: grid;
  grid-gap: 52px;
  grid-template-columns: repeat(6, 1fr);
  background-color: orangered;
}
.l-grid--col {
  grid-column: auto/span 6;
}
.l-grid--col-1 {
  grid-column: auto/span 1;
  background-color: lightblue;
}
.l-grid--col-2 {
  grid-column: auto/span 2;
  background-color: lightblue;
}
.l-grid--col-3 {
  grid-column: auto/span 3;
  background-color: lightblue;
}
.l-grid--col-4 {
  grid-column: auto/span 4;
  background-color: lightblue;
}
.l-grid--col-5 {
  grid-column: auto/span 5;
  background-color: lightblue;
}
.l-grid--col-6 {
  grid-column: auto/span 6;
  background-color: lightblue;
}

<div class="l-wrap">
  <div class="l-grid l-grid__centered">
    <div class="l-grid--col-2">
      <p>This should span 2 and be centered.</p>
    </div>
  </div>
</div>

- eivindml

澄清一下，我想创建一个实用类，就像Zurb Foundation中找到的.centered类一样：http://foundation.zurb.com/sites/docs/grid.html#centered-columns （但仅适用于CSS Grid）。 - eivindml

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Benjamin · Accepted Answer

CSS网格提供了justify-items和justify-self属性，可用于沿行轴对齐网格项。 justify-items适用于网格容器。justify-self适用于网格项。

因此，您的实用类可能如下所示：

.l-grid__centered {
    justify-self: center;
    grid-column: 1 / -1;
}

这段文字告诉网格项在跨越从第一列到最后一列的网格区域上居中自身。(在grid-column和grid-row上使用负整数值可从末尾开始计数。)

.l-wrap {
  width: 100%;
  max-width: 1196px;
  margin: 0 auto;
}

.l-grid {
  display: grid;
  grid-gap: 52px;
  grid-template-columns: repeat(6, 1fr);
  background-color: orangered;
}
.l-grid--col {
  grid-column: auto/span 6;
}
.l-grid--col-1 {
  grid-column: auto/span 1;
  background-color: lightblue;
}
.l-grid--col-2 {
  grid-column: auto/span 2;
  background-color: lightblue;
}
.l-grid--col-3 {
  grid-column: auto/span 3;
  background-color: lightblue;
}
.l-grid--col-4 {
  grid-column: auto/span 4;
  background-color: lightblue;
}
.l-grid--col-5 {
  grid-column: auto/span 5;
  background-color: lightblue;
}
.l-grid--col-6 {
  grid-column: auto/span 6;
  background-color: lightblue;
}

    .l-grid__centered {
        justify-self: center;
        grid-column: 1 / -1;
    }

<div class="l-wrap">
  <div class="l-grid l-grid__centered">
    <div class="l-grid--col-2">
      <p>This should span 2 and be centered.</p>
    </div>
  </div>
</div>

jsFiddle演示

注意：实用类应用于网格项，而不是网格容器。此外，该方法会破坏原始内容的2列网格区域。居中的内容将能够跨越整行扩展。

另外，当使用六列网格时，为了水平居中一个两列网格区域，您的实用程序类可以如下所示：

.__centered {
  grid-column: 3 / span 2;
 }

或者

.__centered {
  grid-column: 3 / -3; 
 }

.l-wrap {
  width: 100%;
  max-width: 1196px;
  margin: 0 auto;
}

.l-grid {
  display: grid;
  grid-gap: 52px;
  grid-template-columns: repeat(6, 1fr);
  background-color: orangered;
}

.l-grid--col {
  grid-column: auto/span 6;
}

.l-grid--col-1 {
  grid-column: auto/span 1;
  background-color: lightblue;
}

.l-grid--col-2 {
  grid-column: auto/span 2;
  background-color: lightblue;
}

.l-grid--col-3 {
  grid-column: auto/span 3;
  background-color: lightblue;
}

.l-grid--col-4 {
  grid-column: auto/span 4;
  background-color: lightblue;
}

.l-grid--col-5 {
  grid-column: auto/span 5;
  background-color: lightblue;
}

.l-grid--col-6 {
  grid-column: auto/span 6;
  background-color: lightblue;
}

.l-grid__centered {
  grid-column: 3 / span 2;
  text-align: center;
}

<div class="l-wrap">
  <div class="l-grid">
    <div class="l-grid--col-2 l-grid__centered">
      <p>This should span 2 and be centered.</p>
    </div>
  </div>
</div>

jsFiddle演示

注意：此解决方案仅居中偶数编号的网格区域。