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

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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">max-width: 100px;

Copier après la connexion

}
}

 <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!