CSS-Rasterlayout für quadratische Zellen
P粉593536104
2023-08-15 20:13:32
<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>