Maison >interface Web >tutoriel CSS >Comment puis-je créer une grille de carrés réactive à l'aide de Flexbox ou d'une grille ?

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

Susan Sarandon
Susan Sarandonoriginal
2024-12-25 13:15:09306parcourir

How Can I Create a Responsive Grid of Squares Using Flexbox or Grid?

Grille de carrés réactifs

L'affichage d'une grille de carrés qui répondent à différentes tailles d'écran et contiennent du contenu aligné verticalement et horizontalement peut être réalisé avec une certaine implémentation de Flexbox ou Grille.

Flexbox

En utilisant Flexbox, vous pouvez créer une grille flexible comme ceci :


 affichage : flex;<br> flex-wrap: wrap;<br> justifier-content: space-around;<br> align-content: start;<br>}</p><p>.square {<br> flex-grow: 1;<br> largeur maximale : 200 px ;<br> couleur d'arrière-plan : #f1f1f1 ;<br> marge : 10px;<br> padding : 20px;<br> text-align: center;<br>}</p><p>@media (largeur maximale : 768px) {<br> .square {</p><pre class="brush:php;toolbar:false">max-width: 100px;

}
}


 <div class="square">Carré 1</div&gt ;<br> <div> <div class="square">Carré 3</div><br></div>

Grid

Alternativement, vous Vous pouvez utiliser la disposition Grille pour plus de contrôle sur la grille. structure :


 affichage : grille ;<br> grille-modèle-colonnes : répétition (ajustement automatique, minmax(200px, 1fr)); // définit le nombre de colonnes<br> gap: 10px; // définit l'écart entre les éléments de la grille<br>}</p>
<p>.square {<br> background-color: #f1f1f1;<br> text-align: center;<br> padding: 20px;<br> }


 
Carré 1

Carré 3


Flexbox et Grid propose différentes méthodes pour créer une grille de carrés réactifs. Le choix entre les deux dépendra de vos exigences et préférences spécifiques.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn