Comment puis-je créer une grille réactive d'éléments carrés immuables en utilisant uniquement CSS ?

Création d'une disposition en grille d'éléments carrés immuables à l'aide de CSS

Dans cette requête, l'objectif est d'établir un système de grille composé d'éléments carrés qui conservent leurs dimensions quels que soient les ajustements de la taille de l’écran. Le besoin de valeurs fixes est éliminé et la mise en œuvre d'une grille CSS est une exigence.

Pour y parvenir, une méthode efficace consiste à utiliser un pseudo-élément pour maintenir un rapport hauteur/largeur cohérent de 1:1. Alternativement, la dernière propriété « aspect-ratio » peut être utilisée, comme illustré ci-dessous :

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}
.container div {
  background-color: red;
  aspect-ratio: 1;
}

Dans le code HTML fourni, chaque élément « div » représente un carré :

<div>

L'utilisation de cette approche garantit que les éléments carrés conservent leurs proportions et ne sont pas déformés lorsque l'écran est redimensionné.

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!