html – CSS Grid中的列居中

我正在尝试使用本机CSS Grid属性创建一个简单的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>

编辑：不知道为什么,但问题得到了落实.也许是因为帕格/萨斯的代码片段.所以我把它改成了HTML / CSS.

解决方法

CSS Grid提供 justify-items和 justify-self属性,可用于沿行轴对齐网格项.

justify-items适用于网格容器. justify-self适用于网格项目.

所以你的实用程序类看起来像这样：

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

这告诉网格项将自身居中于从第一列到最后一列的网格区域中的行. (Negative integer values on grid-column and grid-row start the count from the end side.)

.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 demo

注意：实用程序类适用于网格项,而不是网格容器.此外,此方法还会破坏原始内容的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 demo

注意：此解决方案仅将偶数网格区域居中.

原文链接：https://www.f2er.com/html/232101.html

html – CSS Grid中的列居中

解决方法

猜你在找的HTML相关文章