Comment créer une disposition de grille réactive de carrés de taille égale à l'aide d'une grille CSS ou de Flexbox ?

Disposition de grille réactive avec des carrés de taille égale

Problème :

Concevoir une disposition de grille réactive composée de carrés de taille égale , avec espacement des gouttières adaptable. Considérez à la fois les approches CSS Grid et Flexbox.

Solution :

Grille CSS avec astuce de remplissage :

Utilisez le "padding" -bottom" pour forcer les proportions carrées. Ajoutez un pseudo-élément avec un pourcentage de remplissage en bas correspondant au rapport hauteur/largeur carré souhaité (par exemple, 100 %). Cela simule une hauteur fixe pour le conteneur carré.

.square {
  position: relative;
  ...
  padding-bottom: 100%;
}

.square::before {
  content: '';
  display: block;
  padding-top: 100%;
}

Flexbox avec positionnement absolu :

Utilisez une disposition Flexbox avec un pseudo-élément. Définissez la hauteur du pseudo-élément sur le rapport hauteur/largeur carré (par exemple, 100 %) et positionnez absolument le contenu dans le conteneur carré.

.square {
  position: relative;
  ...
  flex-grow: 0;
}

.square::before {
  content: '';
  display: block;
  height: 100%;
}

.square .content {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 100%;
}

Espacement des gouttières :

Pour les deux approches, appliquez une marge ou un remplissage aux éléments carrés pour créer gouttières.

Remarque : Assurez-vous que le contenu est parfaitement positionné dans les carrés pour conserver les proportions.

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!