Comment puis-je créer une grille de carrés réactive à l'aide de CSS Grid et Flexbox ?

Grilles CSS avec Flexbox pour des carrés réactifs

La création d'une grille réactive de carrés à l'aide de CSS Grid et Flexbox peut être réalisée en comprenant les principes clés et en les appliquant efficacement.

Méthodologie :

1. Utilisez Flexbox pour la distribution horizontale : Flexbox offre la flexibilité de distribuer les carrés horizontalement tout en conservant leur largeur. Ajustez la largeur des carrés à l'aide de flex ou min-width.
2. Définir le rapport d'aspect carré : Pour vous assurer que les éléments sont carrés, ajoutez un rapport d'aspect : 1 / 1 au style des carrés. Cette propriété garantit que la largeur et la hauteur restent dans un rapport constant de 1:1.
3. Définir la hauteur sur Auto : Contrairement à la largeur, la hauteur du les carrés doivent être réglés sur auto. Cela permet aux carrés d'être mis à l'échelle verticalement sans déformer leur rapport hauteur/largeur.
4. Utilisez Flexbox pour le redimensionnement en hauteur : À mesure que les carrés évoluent verticalement, vous remarquerez peut-être des espaces. entre eux. Pour les éliminer, ajoutez align-items: stretch au conteneur parent, en vous assurant que les carrés s'étirent pour remplir l'espace vertical disponible.

Implémentation du code :

Voici un exemple de code révisé intégrant ces principes :

 display: flex;<br> justifier-content: espace-autour;<br> align-content: stretch;<br>}<br>.flex-item {<br> arrière-plan : tomate;<br> marge : 5px;<br> couleur : blanc;<br> police-weight : gras;<br> taille de la police : 1,5em;<br> alignement du texte : centre;<br> flex : 1 0 auto;<br> rapport d'aspect : 1 / 1 ;<br> hauteur : auto ;<br>}<br>

 <div class="flex-item">1</div><br> <div> <div class="flex-item">3</div><br> <div> <div class= "élément-flex">5</div><br> <div> <div class="flex-item">7</div><br></div>