如何使 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中文网其他相关文章！