CSS-Rasterlayout für quadratische Zellen
<p>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. </p>
<p>Ich habe also ein grundlegendes Rasterlayout: </p>
<pre class="brush:php;toolbar:false;">.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;
}</pre>
<p>Es gibt auch Klassen für Elemente, die sich über mehrere Spalten oder Zeilen erstrecken: </p>
<pre class="brush:php;toolbar:false;">.width-unit-2 {
Gitterspaltenende: Spanne 2;
}
.height-unit-2 {
Gitterzeilenende: Spanne 2;
}</pre>
<p>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. </p>
<p>Gibt es eine Möglichkeit, Gitterzellen quadratisch zu machen, ohne <code>aspect-ratio</code> zu verwenden? </p>
