Zeilen über mehrere Spalten erstrecken lassen

Zeilen im CSS-Raster können mithilfe der entsprechenden Rastereigenschaften so konfiguriert werden, dass sie mehrere Spalten umfassen. So erreichen Sie dies:

Zeilenbasierte Platzierung:

Der gebräuchlichste Ansatz ist die zeilenbasierte Platzierung, bei der Sie Spaltenanfangs- und -endzeilen angeben:

grid-column: 1 / 4;  // Spans columns 1, 2, and 3

Explizite Rasterfläche:

Verwenden Sie die Eigenschaft „Grid-Area“, die die belegten Zellen explizit definiert:

grid-area: 1 / 2 / span 3;  // Spans 3 columns from row 1, column 2

Negative Werte:

Negative Werte in „grid-column“ oder „grid-column-start“ können für rechts- Platzierung links:

grid-column: -2 / -1;  // Spans the last 2 columns

Spaltenlinienklemmung:

Diese Technik verwendet Zeilenklemmung, um den Endpunkt der Zeile auf den verfügbaren Platz zu erweitern:

grid-column: auto;
grid-column-end: 100%;

Automatische Größenanpassung mit Minimum:

Automatische Größenanpassung mit einer Mindestbreite stellt sicher, dass die Zeile mindestens eine angegebene Anzahl von einnimmt columns:

grid-column: auto;
min-width: 400px;

Beispiel:

So strecken Sie die Navigationszeile über alle Spalten:

  

    ...
  
  ...

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

.main-nav {
  grid-column: 1 / -1;  // Spans all columns
}

Durch die Anwendung einer dieser Methoden können Sie Zeilen oder Spalten über mehrere Spalten im CSS-Grid erweitern und so komplexe und flexible Layouts erstellen.