Comment puis-je créer une disposition de grille carrée réactive à l'aide d'une grille CSS ?

Création d'une disposition de grille carrée avec grille CSS

Création d'une disposition de carrés, avec quatre carrés dans chaque ligne, peut être réalisée en utilisant CSS Grille. Pour garantir que les carrés conservent leur forme même lors du redimensionnement de l'écran, il est crucial d'éviter d'utiliser des valeurs fixes.

Exemple de code

Le code suivant montre comment créer un tel mise en page :

.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>

Explication

• L'élément .container est défini pour afficher : grille et utilise un modèle de grille avec quatre colonnes égales width.
• La propriété grid-gap ajoute un écart de 5 pixels entre le carrés.
• Chaque carré, représenté par le sélecteur div .container, a une couleur de fond rouge.
• La propriété de rapport d'aspect, prise en charge par les navigateurs modernes, est utilisée pour maintenir un rapport d'aspect de 1:1. rapport hauteur/largeur pour chaque carré, garantissant qu'ils restent carrés quelle que soit la taille ou l'orientation de l'écran.

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!