Comment créer une grille de carrés réactive à l'aide de CSS ?

Création d'une grille de carrés réactifs

Introduction :
Créer une mise en page comportant des carrés réactifs peut souvent être une tâche difficile. Cependant, avec l'aide des techniques CSS, obtenir cet effet est possible.

Disposition des carrés réactifs :
L'exemple fourni montre une grille de carrés avec un contenu aligné verticalement et horizontalement. Pour implémenter cette mise en page, nous utiliserons les propriétés "grid" et "aspect-ratio".

Implémentation CSS :
Le code CSS ci-dessous établit la grille et définit l'aspect rapport de chaque carré pour conserver sa forme carrée :

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2%;
}

.square {
  aspect-ratio: 1 / 1;
}

Alignement du contenu :
Pour aligner le contenu dans chaque carré, nous utiliserons la propriété « flex » et la propriété « align-items » :

.square {
  display: flex;
  align-items: center;
}

Gestion flexible du contenu :
Les carrés peuvent accueillir différents types de contenu , y compris du texte, des images et des listes. Pour garantir que le contenu reste centré, nous appliquerons un remplissage approprié et veillerons à ce que les images soient contenues dans les carrés :

.square {
  padding: 5%;
}

.square img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

Images pleine largeur :
Pour les carrés affichant une images de largeur, nous supprimerons le remplissage et ajusterons la propriété object-fit pour couvrir le carré complètement :

.square.fullImg {
  padding: 0;
}

.square.fullImg img {
  object-fit: cover;
}

Dimensionnement dynamique :
En définissant la propriété "grid-template-columns" comme "repeat(3, 1fr)", les carrés ajustent leur largeur dynamiquement en fonction de l'espace disponible, en conservant une mise en page réactive sur différentes tailles d'é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!