Cellules carrées de disposition de grille CSS

Question

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.

J'ai donc une disposition de grille de base :

.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 ;
}
Il existe également des classes pour les éléments qui s'étendent sur plusieurs colonnes ou lignes : 
.width-unit-2 {
    fin de colonne de grille : travée 2 ;
}

.unité de hauteur-2 {
    fin de ligne de grille : travée 2 ;
}
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. 
Existe-t-il un moyen de rendre les cellules de la grille carrées sans utiliser aspect-ratio ? 
            

Answer 1

Définissez la taille de ce carréaspect-ratio实际上是1x1，然后CSS根据height或width