Wie richtet man ein Element vertikal zentriert an der letzten Zeile im CSS-Raster aus?

Question

Ich gestalte einige Elemente mithilfe eines CSS-Rasters, etwa so...#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;}&lt;divid="contain

P粉680000555 · Answer

在这篇文章中发现了一个很棒的关于如何使用伪选择器控制剩余网格项的方法：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;
}

/* 处理两个孤立项 */

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

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

/* 处理单个孤立项 */

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

P粉193307465 · Answer

CSS Grid不适合在整行上进行对齐，因为交叉轨道会阻挡道路。这里有一个详细的解释：

将网格项对齐到整行/列（类似于flex项）

作为替代方案，使用flexbox并设置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;
}


  Item
  Item
  Item
  Item
  Item
  Item
  Item
  Item
  Item
  Item
  Item
  Item
  Item
  Item
  Item