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

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

DDD
DDDoriginal
2024-12-28 10:00:15966parcourir

How Can I Create a Responsive Grid of Immutable Square Elements Using Only 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!

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