Können Rasterelemente in impliziten CSS-Rastern bis zur letzten Zelle reichen?

Können sich Rasterelemente in impliziten Rastern bis zur letzten Rasterzelle erstrecken?

Rasterlayouts werden häufig verwendet, um Inhalte in Zeilen und Spalten zu organisieren. In manchen Szenarien kann es wünschenswert sein, dass sich ein Element über mehrere Zeilen oder Spalten erstreckt, unabhängig von der Anzahl der Zeilen oder Spalten im Raster. Dies kann jedoch eine Herausforderung darstellen, wenn implizite Raster verwendet werden, bei denen die Anzahl der Zeilen und Spalten nicht explizit definiert ist.

Im bereitgestellten Beispiel enthält ein Container eine dynamische Anzahl von Boxen, die in einem impliziten Raster angeordnet sind. Die Aufgabe besteht darin, den dritten Kasten von der ersten bis zur letzten Gitterlinie überspannen zu lassen. Auch wenn es den Anschein hat, dass eine einfache Grid-Lösung ausreichen sollte, unterstützt die CSS Grid Level 1-Spezifikation derzeit eine solche Lösung nicht.

In einer anderen Referenz wird jedoch eine Problemumgehung mithilfe der absoluten Positionierung vorgeschlagen.

Lösung des Problems in expliziten Rastern

Während eine Spanne über Zellen hinweg in impliziten Rastern nicht möglich ist, ist dies der Fall kann in expliziten Rastern erreicht werden, in denen die genaue Anzahl der Zeilen und Spalten mithilfe von Eigenschaften wie „grid-template-rows“, „grid-template-columns“ und „grid-template-areas“ definiert wird.

Gemäß CSS Rasterspezifikation: Negative Ganzzahlen können zum Zählen ab der Endkante eines expliziten Rasters verwendet werden. Durch die Nutzung dieser Funktion können wir das gewünschte Verhalten erreichen:

grid-column: 3 / -1;

Diese Syntax erstreckt sich über den Rasterbereich von der dritten Spaltenzeile bis zur letzten Spaltenzeile. In ähnlicher Weise würde sich Folgendes von der ersten Spaltenzeile bis zur dritten Spaltenzeile erstrecken:

grid-column: 1 / -3;

Es ist wichtig zu beachten, dass dieser Ansatz nur auf explizite Raster anwendbar ist, in denen die spezifische Zeilen- und Spaltenanzahl definiert ist.

Das obige ist der detaillierte Inhalt vonKönnen Rasterelemente in impliziten CSS-Rastern bis zur letzten Zelle reichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!