如何将 CSS 网格中最后一行的元素居中?
How to center elements on the last row in CSS Grid?
我正在使用 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>
如何让最后一行居中而不是左对齐?我不能保证项目的数量,所以想要使布局看起来适合任何数量的项目。
这是我应该改用 flexbox 的东西吗?或者 CSS 网格是否适合使用?
我在网格方面的工作不多,但据我所知,如果您想使用 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 值,就像电子表格一样。
是的,您想要一个物品包装的系统。由于 flex-wrap
.
,Flexbox 符合要求
#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/
这会使子项占用所有可用空间 space,如果该行已满,则为 none,这将是其标准大小。
如果您希望容器自动调整大小,请删除 width
属性 容器及其项目将自动调整大小。没关系,但我假设您想定义一行中的项目数量。
CSS 网格不适合整行对齐,因为交叉轨道会挡路。详细解释如下:
作为替代方案,使用 flexbox 和 justify-content: center
。
这会将所有项目打包在行的水平中心。然后你的边距将它们分开。
在完全填充的行上,justify-content
将无效,因为 。
在有空闲 space 的行上(在您的情况下,只有最后一行),项目居中。
#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;
}
找到一篇关于如何 Control Leftover Grid Items with Pseudo-selectors
的好文章
.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>
我正在使用 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>
如何让最后一行居中而不是左对齐?我不能保证项目的数量,所以想要使布局看起来适合任何数量的项目。
这是我应该改用 flexbox 的东西吗?或者 CSS 网格是否适合使用?
我在网格方面的工作不多,但据我所知,如果您想使用 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 值,就像电子表格一样。
是的,您想要一个物品包装的系统。由于 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/
这会使子项占用所有可用空间 space,如果该行已满,则为 none,这将是其标准大小。
如果您希望容器自动调整大小,请删除 width
属性 容器及其项目将自动调整大小。没关系,但我假设您想定义一行中的项目数量。
CSS 网格不适合整行对齐,因为交叉轨道会挡路。详细解释如下:
作为替代方案,使用 flexbox 和 justify-content: center
。
这会将所有项目打包在行的水平中心。然后你的边距将它们分开。
在完全填充的行上,justify-content
将无效,因为
在有空闲 space 的行上(在您的情况下,只有最后一行),项目居中。
#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;
}
找到一篇关于如何 Control Leftover Grid Items with Pseudo-selectors
的好文章.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>