Wie kann ich dafür sorgen, dass Rasterelemente im CSS-Raster bis zur letzten Zeile/Spalte reichen?

Können sich Rasterelemente in impliziten Rastern bis zur letzten Zeile/Spalte erstrecken?

In CSS Grid ist es möglich, dass sich Rasterelemente bis zur letzten Zeile/Spalte erstrecken die letzte Zeile/Spalte in expliziten Rastern unter Verwendung negativer Ganzzahlen. Diese Technik funktioniert jedoch nicht für implizite Raster.

Implizite Raster

Implizite Raster haben keine feste Anzahl von Zeilen und Spalten, daher ist dies nicht möglich um direkt eine Spanne bis zur letzten Zeile/Spalte anzugeben. Betrachten Sie zum Beispiel das folgende Raster mit einer unbekannten Anzahl von Zeilen:

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;
  grid-template-rows: auto [last-line];
}

Spannen in impliziten Rastern

Um ein Element vom ersten bis zum letzten überspannen zu lassen Um eine Zeile in einem impliziten Raster anzuzeigen, können Sie die absolute Positionierung verwenden. In diesem Beispiel platzieren wir das dritte Feld über den anderen Feldern und versetzen es dann nach unten, sodass es den Anschein hat, als würde es sich über die Zeilen erstrecken:

.box:nth-child(3) {
  background-color: yellow;
  position: relative;
  top: calc(-100vh + 20px);
  grid-column: last-col / span 1;
  grid-row: 1 / last-line;
}

Explizite Raster

In expliziten Rastern, in denen die Zeilen und Spalten explizit definiert sind, können Sie negative Ganzzahlen verwenden, um bis zur letzten Zeile/Spalte zu reichen. Dies wird unten veranschaulicht:

.container {
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  grid-template-rows: 100px 1fr 100px;
}

.item {
  grid-column: 2 / -2;
  grid-row: 2 / -2;
}

In diesem Beispiel erstreckt sich das .item-Element über die gesamte zweite Spalte und Zeile des Rasters.

Fazit

Während CSS Grid keine direkte Möglichkeit bietet, in impliziten Rastern bis zur letzten Zeile/Spalte zu reichen, können Sie dies mit absoluter Positionierung erreichen. In expliziten Gittern können Sie zu diesem Zweck jedoch negative ganze Zahlen verwenden.

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass Rasterelemente im CSS-Raster bis zur letzten Zeile/Spalte reichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!