Comment puis-je créer une disposition de grille carrée réactive en utilisant uniquement une grille CSS ?

Disposition carrée basée sur une grille CSS

Cette question explore la création d'une disposition en grille CSS composée de carrés qui conservent leurs dimensions quel que soit l'écran taille. Il nécessite l'utilisation de CSS Grid et interdit les dimensions à valeur fixe.

Solution :

Vous pouvez y parvenir en utilisant la propriété aspect-ratio :

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}

.container div {
  background-color: red;
  aspect-ratio: 1;
}

La propriété de rapport d'aspect garantit que la largeur et la hauteur des carrés restent toujours dans un rapport de 1:1, préservant ainsi leur forme carrée.

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!