CSS Grid提供
justify-items和
justify-self属性,可用于沿行轴对齐网格项.
justify-items适用于网格容器. justify-self适用于网格项目.
所以你的实用程序类看起来像这样：
.l-grid__centered {
justify-self: center;
grid-column: 1 / -1;
}
.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;
}
This should span 2 and be centered.
注意：实用程序类适用于网格项,而不是网格容器.此外,此方法还会破坏原始内容的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;
}
This should span 2 and be centered.
注意：此解决方案仅将偶数网格区域居中.