Heim > Web-Frontend > CSS-Tutorial > So erweitern Sie die Rasternavigation über die gesamte Website-Breite

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

DDD
Freigeben: 2024-10-24 04:51:31
Original
272 Leute haben es durchsucht

How to Extend Grid Navigation Across the Entire Website Width

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

Option 2: Negative Werte verwenden

<code class="css">grid-column: 1 / -1;</code>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Quelle:php
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage