CSS-Rasterlayout für quadratische Zellen

Question

Ich möchte eine Dashboard-ähnliche Ansicht mit CSS Grid-Layout als Basis erstellen. Ich möchte 16 Spalten über die gesamte Länge des Bildschirms verteilen (sollte responsiv sein). Die Höhe der Zelle sollte dann durch die Breite der Zelle bestimmt werden, um die Zelle zu einem Quadrat zu machen. Das Problem ist, dass ich möchte, dass sich einige Zellen über mehrere Zellen erstrecken. Ich möchte zum Beispiel ein Element, das 2x1 Zellen einnimmt.

Ich habe also ein grundlegendes Rasterlayout:

.grid-container {
    Anzeige: Raster;
    Rastervorlagenspalten: wiederholen (16, 1fr);
    Grid-Auto-Zeilen: var(--tile-unit);
    Lücke: var(--tile-gap);
    align-content: start;
}

.grid-item {
    Hintergrund: hellgrau;
    Randradius: 10px;
}

Es gibt auch Klassen für Elemente, die sich über mehrere Spalten oder Zeilen erstrecken:

.width-unit-2 {
    Gitterspaltenende: Spanne 2;
}

.height-unit-2 {
    Gitterzeilenende: Spanne 2;
}

Jetzt versuche ich, das Seitenverhältnis des Elements zu verwenden. Das funktioniert gut für ein 2x1-Element, aber wenn ich ein 2x2-Element möchte, kann ich nicht einfach das Seitenverhältnis in der entsprechenden Klasse definieren, ich muss für diesen Fall eine separate Klasse definieren.

Gibt es eine Möglichkeit, Gitterzellen quadratisch zu machen, ohne aspect-ratio zu verwenden?

Answer 1

这个正方形的aspect-ratio实际上是1x1，然后CSS根据height或width设置它的大小