Comment centrer les cases horizontalement et aligner la dernière ligne à gauche avec la grille CSS ?

Aligner la dernière rangée de cases centrées à gauche à l'aide de la grille CSS

Q : Comment puis-je centrer les cases horizontalement tout en alignant la dernière ligne sur la à gauche ?

R : En utilisant la propriété CSS grid, il est possible de réaliser ce scénario d'alignement sans ajustements manuels ni scripting.

Pour y parvenir, modifiez les propriétés CSS suivantes :

div {
  /* Add resize property for dynamic width adjustment */
  resize: horizontal;
  /* Add justify-content property to center the boxes horizontally */
  justify-content: center;
}

ul {
  display: grid;
  /* Define the number of columns based on the number of boxes */
  grid-template-columns: repeat(auto-fit, 40px);
  /* Define the height of the boxes */
  grid-auto-rows: 40px;
  /* Add grid-gap property for spacing between boxes */
  grid-gap: 4px;
}

En spécifiant justifier-content: center, les cases seront centrées horizontalement au sein du conteneur. La propriété display: grid alignera la dernière rangée de cases vers la gauche, comme spécifié dans le système de grille.

La propriété resize: horizontal permet un ajustement dynamique de la largeur du conteneur. Au fur et à mesure que la largeur change, les boîtes se réorganiseront automatiquement pour s'adapter à l'espace disponible tout en conservant leur alignement centré.

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!