Comment puis-je créer une grille de carrés réactive avec un contenu centré à l'aide de CSS ?

Grille de carrés réactifs

La création d'une mise en page comportant des carrés réactifs avec un contenu aligné verticalement et horizontalement implique la mise en œuvre de techniques CSS spécifiques.

Grille CSS Layout

Pour créer une mise en page basée sur une grille, utilisez la propriété CSS grid pour définir la structure de la grille. Dans la grille, utilisez grid-template-columns pour spécifier le nombre et la largeur des colonnes pour les carrés. Par exemple :

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

Square Definition

Pour définir les carrés individuels, créez une classe pour eux et appliquez les styles suivants :

.square {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5%;
}

Réactif Dimensionnement

Pour garantir que les carrés restent réactifs, utilisez des dimensions basées sur un pourcentage pour la largeur et la hauteur. Définissez le rapport hauteur/largeur de chaque carré sur 1:1 en utilisant le rapport hauteur/largeur : 1/1 ;.

Alignement vertical

Pour aligner verticalement le contenu dans les carrés , utilisez align-items: center; dans la classe CSS du carré.

Alignement horizontal

Pour l'alignement horizontal, appliquez justifier-content: center; à la classe CSS du carré.

Image Handling

Pour gérer les images, appliquez object-fit: contain; pour garantir qu'ils sont contenus dans les carrés avec leurs proportions préservées. Vous pouvez également utiliser object-fit: cover; pour étirer l'image pour couvrir le carré.

Pour plus de personnalisation et de réactivité, pensez à utiliser des requêtes multimédias pour ajuster la disposition de la grille et les styles de carrés en fonction de 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!