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

Grille de carrés réactifs

Dans ce fil de discussion Stack Overflow, un utilisateur demande comment créer une disposition de carrés réactifs avec des dimensions verticales et horizontales. contenu aligné.

Solution originale (2018)

La solution originale proposée en utilisant la propriété CSS display: flex pour créer une mise en page flexible et les align-items: center et justifier-content: center propriétés pour centrer le contenu dans chaque carré. La conception réactive a été réalisée à l'aide de requêtes multimédias.

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