Comment puis-je centrer une boîte avec la dernière ligne alignée à gauche à l'aide d'une grille CSS ?

Alignement central avec la dernière ligne alignée à gauche

Cette requête relève le défi de l'alignement des boîtes dans un conteneur, centrées horizontalement mais avec la dernière rangée justifiée à gauche. Le problème clé est que les éléments ul typiques ont tendance à ajuster leur largeur en fonction de leur contenu, ne laissant aucune place aux ajustements manuels.

Pour résoudre ce problème, nous pouvons exploiter la grille CSS, qui offre plus de contrôle sur le placement des éléments. Voici un extrait de code CSS et HTML mis à jour :

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 here */
  grid-auto-rows: 40px; /* height here */
  grid-gap: 4px;
  justify-content: center; /* this will do the magic */
}

ul li {
  background-color: wheat;
}

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

En ajoutant justifier-content: center; vers l'élément ul, nous déplaçons le contenu vers le centre. Cependant, nous maintenons l'alignement à gauche pour la dernière ligne, ce qui est une propriété inhérente à la grille CSS.

Pour ajuster la largeur et la hauteur des éléments, modifiez les valeurs dans grid-template-columns et grid-auto- rangées. Ajustez les propriétés de remplissage et de largeur du div en fonction de vos exigences de conception.

En adoptant la flexibilité de la grille CSS, nous pouvons réaliser un alignement dynamique du contenu sans recourir à des ajustements manuels ou à des scripts.

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!