Comment la grille CSS peut-elle centrer les cases tout en alignant à gauche la dernière ligne ?

Centrage et alignement à gauche des boîtes avec grille CSS

De nombreux utilisateurs ont rencontré des difficultés pour aligner les boîtes de manière centrale tout en alignant leur dernière ligne sur la gauche. Par défaut, les éléments ul ont souvent une largeur fixe qui ne s'adapte pas à leur contenu, ce qui rend difficile l'obtention automatique du centrage et de l'alignement à gauche.

Solution de grille CSS

Pour résoudre ce problème, une grille CSS peut être utilisée. En implémentant les propriétés CSS suivantes, vous pouvez centrer les cases tout en alignant leur dernière ligne à gauche :

div {
  padding: 20px;
  width: 200px;
  border: 1px solid;
  overflow: hidden;
  resize: horizontal;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, 40px); /* Width of elements */
  grid-auto-rows: 40px; /* Height of elements */
  grid-gap: 4px;
  justify-content: center; /* Centers boxes */
}

ul li {
  background-color: wheat;
}

Code HTML

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

Explication

Les propriétés grid-template-columns et grid-auto-rows définissent le nombre de colonnes et de lignes dans la grille. La propriété grid-gap définit l'espacement entre les éléments. La clé du centrage et de l’alignement à gauche est la propriété justifier-contenu. Lorsqu'il est défini sur "center", il positionne les éléments de la grille au centre horizontal de leur espace disponible dans le conteneur parent. Cela garantit que les cases sont centrées, la dernière ligne étant alignée vers la gauche lorsqu'elle arrive à la fin de la grille.

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!