如何將網格導航擴展到整個網站寬度

網格剖析

您遇到了一個問題，即儘管指定了導航(nav)，但導航(nav) 並未延伸到網站的整個寬度您希望它佔據的列。為了理解這個問題，讓我們分解一下您使用的語法：

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

此符號定義了網格列的起點和終點，分解為：

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

在本例中，它告訴導航(nav) 從第一條網格列線延伸到第二條網格列線。但是，存在差異：

您的網格實際上有三條列線，而不是兩條。

網格線計數：開始線和結束線

中網格系統中，列/行線的數量總是等於列/行的數量加一。這條額外的線表示網格的末端。

調整網格規格

要解決此問題，您可以調整網格規格以跨越所有欄位：

選項1：指定結束欄位

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

選項2：使用負值

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

負值從末尾開始計數網格，因此「-1」代表最後一列線。

進行更改

將原始網格列規則替換為上述選項之一：

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

此更改將允許您的導航(nav) 延伸到網站的整個寬度。

以上是如何將網格導航擴展到整個網站寬度的詳細內容。更多資訊請關注PHP中文網其他相關文章！