So erweitern Sie die Rasternavigation über die gesamte Website-Breite

Die Anatomie Ihres Rasters

Sie sind auf ein Problem gestoßen, bei dem sich Ihre Navigation (nav) nicht über die gesamte Breite Ihrer Website erstreckt, obwohl sie angegeben wurde Spalten, die es belegen soll. Um das Problem zu verstehen, schlüsseln wir die von Ihnen verwendete Syntax auf:

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

Diese Notation definiert die Start- und Endpunkte der Rasterspalte und gliedert sich wie folgt auf:

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

In diesem Fall weist es die Navigation (nav) an, sich von der ersten Rasterspaltenzeile bis zur zweiten Rasterspaltenzeile zu erstrecken. Es gibt jedoch eine Diskrepanz:

Ihr Raster hat tatsächlich drei Spaltenlinien, nicht zwei.

Rasterlinienzählung: Start- und Endlinien

In In einem Rastersystem ist die Anzahl der Spalten-/Zeilenzeilen immer gleich der Anzahl der Spalten/Zeilen plus eins. Diese zusätzliche Zeile zeigt das Ende des Rasters an.

Anpassen Ihrer Rasterspezifikation

Um dieses Problem zu beheben, können Sie Ihre Rasterspezifikation so anpassen, dass sie sich über alle Spalten erstreckt:

Option 1: Geben Sie die Endspalte an

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

Option 2: Negative Werte verwenden

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

Negative Werte zählen ab dem Ende der Raster, also stellt „-1“ die letzte Spaltenzeile dar.

Änderung vornehmen

Ersetzen Sie Ihre ursprüngliche Rasterspaltenregel durch eine der oben genannten Optionen:

<code class="css">.mainnav {
  grid-column: 1 / -1;
}</code>

Durch diese Änderung kann sich Ihre Navigation (Nav) über die gesamte Breite Ihrer Website erstrecken.

Das obige ist der detaillierte Inhalt vonSo erweitern Sie die Rasternavigation über die gesamte Website-Breite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!