我尝试使用原生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>
&#13;
编辑:不确定原因,但问题得到了落实。也许是因为帕格/萨斯的代码片段。所以我把它改成了HTML / CSS。
答案 0 :(得分:3)
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;
}
&#13;
<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>
&#13;
注意:实用程序类应用于网格项,而不是网格容器。此外,此方法还会破坏原始内容的2列网格区域。中心内容将能够在整个行中展开。
或者,当使用六列网格时,为了使两列网格区域水平居中,您的实用程序类可能如下所示:
.__centered {
grid-column: 3 / span 2;
}
OR
.__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;
}
&#13;
<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>
&#13;
注意:此解决方案仅将偶数网格区域居中。