Comment créer une disposition de grille CSS réactive de carrés de taille égale ?

Disposition en grille CSS au carré

Cette question explore les subtilités de la création d'une disposition en grille CSS composée de carrés, où chaque carré conserve son rapport hauteur/largeur lors du redimensionnement de l'écran.

Mise en œuvre du Mise en page

Pour réaliser cette mise en page, considérez le code CSS suivant :

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

Comprendre le code

• affichage : grid; : Active la disposition en grille pour l'élément conteneur.
• grid-template-columns: 1fr 1fr 1fr 1fr; : définit une grille avec quatre colonnes de largeur égale (1fr = une fraction de l'espace disponible).
• grid-gap : 5px ; : définit un espace de 5 pixels entre les cellules de la grille.
• background-color: red;: Stylise les cellules de la grille avec un fond rouge.
• aspect-ratio: 1;: Conserve le rapport hauteur/largeur de chaque cellule à 1:1. Cette propriété garantit que les carrés conservent leur forme carrée quelle que soit la taille de l'écran.

Cette approche vous permet de créer une grille de carrés qui conserve ses proportions lors du redimensionnement, offrant ainsi une mise en page flexible et réactive.

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!