如何使 CSS 網格中的行延伸到所有列？

在CSS 網格中的所有列上進行行拉伸：調整範圍

將導航行擴展到CSS 網格中的所有列時，請確保指定適當的列線。最初，您定義了：

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

這定義了從網格列第 1 行延伸到第 2 行的行，僅覆蓋一列。

解決方案1：擴展到最後一行

要讓行延伸到所有列，可以調整grid-column 屬性將其擴展到最後一行：

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

這表示該行應從第一列行開始，到第三（最後）列行結束。

解決方案2：使用負值

或者，您可以使用負值從網格末尾引用：

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

這裡，- 1 表示最後一列線，有效地使行跨越所有列。

調整後的程式碼：

<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>

以上是如何使 CSS 網格中的行延伸到所有列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！