如何在 CSS 网格的最后一行居中元素？

我使用 CSS 网格布局一些项目像这样..。

#container {
display: grid;
grid-template-columns: 16.666% 16.666% 16.666% 16.666% 16.666% 16.666%;
}


.item {
background: teal;
color: white;
padding: 20px;
margin: 10px;
}
<div id="container">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>

如何使最后一行居中而不是左对齐？我不能保证项目的数量，所以要使布局看起来正确的任何数量的项目。

这是我应该使用的东西，而不是弹性框? 或 CSS 网格是一个合适的用途？

66124 次浏览
小开

我没有在网格上做太多的工作，但就我所知，如果你想使用 Flex-box，请使用这段代码。

#container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}


.item {
flex: 1;
flex-basis: 16.66%;
background: teal;
color: white;
padding: 20px;
margin: 10px;
}
<div id="container">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>

如果有用就感激，如果没用就忽略。

小开

没有特定的属性用于使最后一行的行为与前一行的行为不同。

不过，基于您在视口宽度内定义了与 N项匹配的设置宽度这一事实，您可以使用 Flexbox 及其 justify-content属性。

将其设置为 center，它将居中最后一行的任何数量的项目。

堆栈片段

html, body {
margin: 0;
}


#container {
display: flex;
flex-wrap: wrap;                  /*  allow items to wrap  */
justify-content: center;          /*  horizontally center items  */
}


.item {
flex-basis: calc(16.666% - 20px); /*  subtract the margin from the width  */
background: teal;
color: white;
padding: 20px;
margin: 10px;
box-sizing: border-box;           /*  make padding be included in the set width  */
}
<div id="container">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>

小开

这违背了电网系统的初衷。网格是一个二维数组，其中所有内容都有 X 和 Y 值，就像电子表格一样。

是的，你想要一个系统的项目包装。 Flexbox 适合这里的法案，因为 flex-wrap。

#container {
padding: 10px;
width: calc((100px + (10px * 2)) * 4); /* item width + padding on either side times number of items */
display: flex;
flex-wrap: wrap;
background: blue;
margin: 10px;
}


#container div {
width: 100px;
height: 100px;
flex-grow: 1;
background: red;
margin: 10px;
}

Https://jsfiddle.net/0c0hzh8t/

这使得子元素占据了所有可用的空间，如果行是满的，那么它将是空的，并且是它的标准大小。

如果希望自动调整容器的大小，那么删除 width属性，容器及其项目将自动调整大小。这样也好，但我假设您想要定义一行中的项的数量。

小开
最佳答案

CSS 网格不适合整行对齐，因为纵横交错的轨道挡住了去路。下面是一个详细的解释:

作为替代方案，使用与 justify-content: center柔性箱。

这样可以将行水平中心的所有项打包，然后边距将它们分开。

在完全填充的行上，justify-content自 没有空间让它工作以来没有任何作用。

对于有空闲空间的行(在您的情况下，只有最后一行) ，项是居中的。

#container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}


.item {
flex: 0 0 calc(16.66% - 20px);
background: teal;
color: white;
padding: 20px;
margin: 10px;
}


* {
box-sizing: border-box;
}
<div id="container">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>

小开

这是我写 HTML 电子邮件的解决方案(截至2018年4月23日) :

#wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-row-gap: 0;
grid-column-gap: 15px;
padding: 15px 15px 0 15px;
}


.item {
border: 1px solid #000;
height: 200px;
margin-bottom: 15px;
}
<div style="width: 100%; margin: 0 auto; text-align: center; vertical-align: middle;">
<div style="overflow: auto; height: 400px; margin-top: 15px;">
<div style="position: relative">
<div id="wrapper">
<div class="item"><div>Item 1</div></div>
<div class="item"><div>Item 2</div></div>
<div class="item"><div>Item 3</div></div>
<div class="item"><div>Item 4</div></div>
<div class="item"><div>Item 5</div></div>
<div class="item"><div>Item 6</div></div>
<div class="item"><div>Item 7</div></div>
<div class="item"><div>Item 8</div></div>
</div>
<div style="position: absolute; bottom: -30px; text-align: center; margin: 0 auto; width: 100%;">
<div style="background-color: #defabc; width: 300px; margin: 0 auto; text-align: center; cursor: pointer;">
<span style="color: #000;">See all items</span>
</div>
</div>
</div>
</div>
</div>

它所做的是，您能够将项目定位到网格包装器最底部的中心。同样，像所有其他解决方案一样，您不能将某些内容放入网格包装器中，使其在最后一行中心对齐。

但至少这是一个不错的替代解决方案。

小开

这应该在不使用 flex 的情况下将行中的任何项居中

.center-item {
grid-column: 1 / -1;
}
小开

找到一篇关于如何使用 用伪选择器控制剩余网格项的文章

.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 20px;
margin: 20px;
padding: 20px;
}
.item {
grid-column: span 2;
background: #AB47BC;
padding: 20px;
}


/* Dealing with 2 orphan items */


.item:last-child:nth-child(3n - 1) {
grid-column-end: -2;
}


.item:nth-last-child(2):nth-child(3n + 1) {
grid-column-end: 4;
}


/* Dealing with single orphan */


.item:last-child:nth-child(3n - 2) {
grid-column-end: 5;
}
<div class="wrapper">
<div class="grid grid--1">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>


<div class="grid grid--2">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>

小开

Codepen

  <div class="grid grid-cols-3 justify-items-center gap-2">
<div class="w-5">1</div>
<div class="w-5">2</div>
<div class="w-5">3</div>
<div class="w-5">4</div>
<div class="w-5">5</div>
<div class="w-5">6</div>
<div class="w-5">7</div>
<div class="w-5">8</div>
<div class="w-5">9</div>
<div class="col-span-3">0</div>
</div>

.col-span-3 {
grid-column: span 3 / span 3;
}


.grid {
display: grid;
}


.w-5 {
width: 1.25rem;
}


.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}


.justify-items-center {
justify-items: center;
}


.gap-2 {
gap: 0.5rem;
}

提交答案