Comment centrer des cases avec une dernière ligne alignée à gauche à l'aide d'une grille CSS ?

Boîtes centrées avec la dernière ligne alignée à gauche

Lorsque vous traitez une liste dynamique d'éléments, il peut être difficile d'obtenir une disposition centrée tout en alignant la dernière ligne des éléments à gauche. Alors que text-align: center aligne les éléments horizontalement dans leur conteneur, il ne prend pas en compte la largeur du conteneur.

Résoudre le problème

CSS Grid fournit une solution à ce problème :

div {
  display: grid;
  justify-content: center;
}

• display : grid convertit le conteneur en une disposition en grille.
• justify-content : centre horizontalement les centres le contenu de la grille.

Cependant, pour garantir que la dernière ligne d'éléments s'aligne à gauche, nous devons spécifier le nombre de colonnes dans la grille à l'aide de grid-template-columns :

ul {
  grid-template-columns: repeat(auto-fit, 40px);
}

• repeat(auto-fit, 40px) crée autant de colonnes que nécessaire pour s'adapter au contenu, chacune avec une largeur de 40px.

Exemple :

<div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

Avec cette solution, les cases restent centrées horizontalement tandis que la dernière ligne s'aligne à gauche, quel que soit le numéro des éléments dans la liste.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!