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 {
  Anzeige: Raster;
  Rastervorlagenspalten: 16,666 % 16,666 % 16,666 % 16,666 % 16,666 % 16,666 %;
}

.Artikel {
  Hintergrund: blaugrün;
  Farbe weiß;
  Polsterung: 20px;
  Rand: 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>

Wie kann ich die letzte Zeile zentriert statt linksbündig gestalten? Ich kann die Anzahl der Artikel nicht garantieren, hoffe also, dass das Layout mit einer beliebigen Anzahl von Artikeln funktioniert.

Ist das etwas, wofür ich Flexbox verwenden sollte? Oder eignet sich CSS Grid zur Verwendung?

Answer 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;
}

/* 处理两个孤立项 */

.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;
}

<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>

Answer 2

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;
}

<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>