Comment créer une disposition de grille réactive avec des carrés de même hauteur à l'aide de CSS Grid et Flexbox ?

Disposition en grille réactive avec des carrés de même hauteur

Introduction

Créer une disposition en grille avec des carrés réactifs peut être un défi, en particulier lorsque vous essayez de maintenir hauteur et espacement égaux entre les carrés. Bien que CSS Grid et Flexbox puissent être utilisés à cette fin, cet article explique comment y parvenir avec CSS Grid et l'astuce "padding-bottom".

Définition de la hauteur égale à la largeur

Utilisation de CSS Grid

Pour définir la hauteur des carrés égale à leur largeur à l'aide de CSS Grid, appliquez l'astuce "padding-bottom", qui crée un pseudo-élément qui conserve le rapport hauteur/largeur de la place. Les règles CSS suivantes peuvent être appliquées :

.square-container {
  display: grid;
  grid-template-columns: 30% 30% 30%;
}

.square {
  position: relative;
  flex-basis: calc(33.333% - 10px);  /* Subtract 10px for margin */
  margin: 5px;
  border: 1px solid;
  box-sizing: border-box;
}

.square::before {
  content: '';
  display: block;
  padding-top: 100%;  /* Sets height equal to width */
}

Cela garantit que les carrés restent des carrés quel que soit leur contenu.

Utilisation de Flexbox

Pour obtenir le même effet avec Flexbox, une approche similaire peut être utilisée :

.square-container {
  display: flex;
  flex-wrap: wrap;
}

.square {
  position: relative;
  flex-basis: calc(33.333% - 10px);  /* Subtract 10px for margin */
  margin: 5px;
  border: 1px solid;
  box-sizing: border-box;
}

.square::before {
  content: '';
  display: block;
  padding-top: 100%;  /* Sets height equal to width */
}

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

Dans Flexbox, la propriété content est utilisée pour positionner le contenu du carré absolument à l'intérieur.

Définition de la gouttière Entre les carrés

L'astuce du "padding-bottom" peut également être utilisée pour créer une gouttière entre les carrés :

.square-container {
  gap: 10px;  /* Set the gap between squares */
}

Cela ajoute un espace de 10 px entre chaque carré.

Comportement réactif

Pour rendre la mise en page réactive, une requête multimédia peut être utilisée pour modifier la disposition de la grille en une seule colonne pour des tailles d'écran plus petites :

@media (max-width: 600px) {
  .square-container {
    grid-template-columns: 100%;
  }
}

Cela garantit que les carrés s'empilent verticalement sur des écrans étroits.

Conclusion

En utilisant l'astuce du "padding-bottom", CSS Grid et Flexbox peuvent être utilisés pour créer une disposition de grille réactive avec des carrés de même hauteur et des gouttières entre eux . Cette technique est largement utilisée et fournit une solution fiable à cette exigence d'aménagement courante.

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!