Wie strecke ich eine Zeile über alle Spalten im CSS-Raster aus?

Zeilen über alle Spalten im CSS-Raster strecken: Ausmaße anpassen

Wenn Sie Ihre Navigationszeile über alle Spalten in einem CSS-Raster erweitern, Stellen Sie sicher, dass Sie die entsprechenden Spaltenzeilen angeben. Ursprünglich hatten Sie Folgendes definiert:

<code class="css">grid-column: 1 / 2;</code>

Dies definiert die Zeile, die sich von der Rasterspaltenzeile 1 bis zur Zeile 2 erstrecken soll und nur eine Spalte abdeckt.

Lösung 1: Erweitern bis Letzte Zeile

Damit sich die Zeile über alle Spalten erstreckt, können Sie die Eigenschaft „grid-column“ anpassen, um sie bis zur letzten Zeile zu erweitern:

<code class="css">grid-column: 1 / 3;</code>

Dies zeigt an, dass die Zeile sollte bei der ersten Spaltenzeile beginnen und bei der dritten (letzten) Spaltenzeile enden.

Lösung 2: Negative Werte verwenden

Alternativ können Sie auch negative Werte verwenden Referenz vom Ende des Rasters:

<code class="css">grid-column: 1 / -1;</code>

Hier stellt -1 die letzte Spaltenzeile dar, wodurch die Zeile effektiv alle Spalten umfasst.

Angepasster Code:

<code class="css">body {
  margin: 0;
  padding: 0;
}

.container {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 4fr 1fr;
  grid-template-rows: 50px auto;
}

.mainnav {
  grid-column: 1 / -1;    /* Adjusted to span all columns */
  grid-row: 1 / 2;        /* Adjustment for explicit grid */
  background-color: #5eccc0;
}

...</code>

Das obige ist der detaillierte Inhalt vonWie strecke ich eine Zeile über alle Spalten im CSS-Raster aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!