Comment créer une grille de carrés réactive avec un contenu centré ?

<br>.container {<br> display: flex;<br> flex-direction: row;<br> flex-wrap: wrap; <br> justifier-contenu : espace-autour;<br>}</p>
<p>.square {<br> width : 100px;<br> height : 100px;<br> display: flex;<br> align-items: center;<br> justifier-content: center;<br>}</p>
<p> @media (largeur maximale : 768 px) {<br> .square {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">width: 50%;

}
}

Solution mise à jour (2022)

Avec l'évolution du CSS, plusieurs nouvelles propriétés ont été introduites qui simplifient la mise en œuvre d'une grille carrée layout:

• grid : définit une disposition de grille pour le conteneur.
• aspect-ratio : spécifie le rapport hauteur/largeur de chaque élément de la grille, en garantissant qu'il reste carré.
• object-fit : contrôle la façon dont les images sont affichées dans les carrés, permettant le centrage et l'ajustement de l'image comportement.

<br>.container {<br> affichage : grille;<br> grille-modèle-colonnes : répétition(3, 1fr);<br> écart : 2 %;<br>}</p>
<p>.square {<br> rapport hauteur/largeur : 1/1;<br> display: flex;<br> align-items: center;<br> justifier-content: center;<br> padding: 5%;<br> background-color: #1E1E1E;<br> couleur : #fff;<br>}</p>
<p>.square img {<br> largeur : 100%;<br> hauteur : 100%;<br> ajustement de l'objet : contenir;<br> position de l'objet : centre;<br>}</p>
<p>.square.fullImg {<br> padding : 0 ;<br>}</p>
<p>.square.fullImg img {<br> ajustement d'objet : cover;<br>}<br>

Le résultat final crée une disposition de grille réactive avec des carrés pouvant contenir différents types de contenu, notamment du texte, des images et des listes, tout en conservant l'alignement et rapport hauteur/largeur.

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!