Cellules carrées de disposition de grille CSS
<p>Je souhaite créer une vue de type tableau de bord en utilisant CSS Grid-Layout comme base. Je veux 16 colonnes réparties sur toute la longueur de l'écran (doivent être réactives). La hauteur de la cellule doit ensuite être déterminée par la largeur de la cellule pour faire de la cellule un carré. Le problème est que je veux que certaines cellules s'étendent sur plusieurs cellules. Par exemple, je veux un élément qui occupe 2x1 cellules. </p>
<p>J'ai donc une disposition de grille de base : </p>
<pre class="brush:php;toolbar:false;">.grid-container {
affichage : grille ;
grille-modèle-colonnes : répéter (16, 1fr);
grille-auto-lignes : var(--tile-unit);
écart : var(--tile-gap);
align-content : démarrer ;
}
.élément de grille {
fond : gris clair ;
rayon de bordure : 10 px ;
}</pré>
<p>Il existe également des classes pour les éléments qui s'étendent sur plusieurs colonnes ou lignes : </p>
<pre class="brush:php;toolbar:false;">.width-unit-2 {
fin de colonne de grille : travée 2 ;
}
.unité de hauteur-2 {
fin de ligne de grille : travée 2 ;
}</pré>
<p>Maintenant, j'essaie d'utiliser le rapport hauteur/largeur de l'élément. Cela fonctionne bien pour un élément 2x1, mais si je veux un élément 2x2, je ne peux pas simplement définir le rapport hauteur/largeur dans la classe correspondante, je dois définir une classe distincte pour ce cas. </p>
<p>Existe-t-il un moyen de rendre les cellules de la grille carrées sans utiliser <code>aspect-ratio</code> ? </p>
