Comment centrer verticalement un élément sur la dernière ligne de la grille CSS ?

Question

Je présente certains éléments à l'aide d'une grille CSS, comme celle-ci...

#container {
  affichage : grille ;
  colonnes de modèle de grille : 16,666 % 16,666 % 16,666 % 16,666 % 16,666 % 16,666 % ;
}

.article {
  fond : bleu sarcelle ;
  Couleur blanche;
  remplissage : 20 px ;
  marge : 10px ;
}</pré>
<pre class="brush:html;toolbar:false;"><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>

Comment puis-je centrer la dernière ligne au lieu de l'aligner à gauche ? Je ne peux pas garantir le nombre d’éléments, alors j’espère que la mise en page fonctionnera avec n’importe quel nombre d’éléments.

Est-ce quelque chose pour lequel je devrais utiliser flexbox ? Ou la grille CSS est-elle appropriée à utiliser ?

Answer 1

Vous avez trouvé une excellente méthode pour contrôler les éléments restants de la grille à l'aide de pseudo-sélecteurs dans cet article : Contrôlez les éléments restants de la grille avec des pseudo-sélecteurs

.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

La grille CSS ne convient pas à l'alignement sur des lignes entières, car des rails qui se croisent gêneraient. Voici une explication détaillée :

• Aligner les éléments de la grille sur des lignes/colonnes entières (semblable aux éléments flexibles)

Comme alternative, utilisez flexbox et set justify-content: center.

Cela regroupera tous les articles au centre horizontal de la rangée. Vos marges les sépareront alors.

Sur une ligne entièrement remplie, justify-content ne fonctionnera pas car il n'y a pas d'espace libre pour que cela fonctionne .

Sur les lignes avec de l'espace libre (dans votre cas, juste la dernière ligne), les éléments apparaîtront centrés.

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