Comment créer une disposition de grille réactive à 4 colonnes avec des carrés de taille égale à l'aide d'une grille CSS ?

Disposition des carrés en grille CSS

Vous souhaitez créer une disposition en grille composée de carrés, chaque ligne contenant quatre carrés. Ces carrés ne se déforment pas lorsque la taille de l'écran change et conservent toujours la même largeur et la même hauteur (les valeurs fixes ne sont pas souhaitables). La grille CSS est requise. Voici comment procéder :

En utilisant CSS, vous pouvez toujours conserver un rapport hauteur/largeur de 1:1 via un pseudo-élément, ou utiliser la nouvelle propriété aspect-ratio, par exemple :

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}
.container div {
  background-color: red;
  aspect-ratio: 1;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

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!