css - 将子元素对齐内部网格线

Question

我有一个简单的 CSS 网格布局，包含三列。我需要让第一行的背景延伸到整个轨道，但将子元素对齐内部网格线，就像标准导航栏与其后面的内容对齐一样。我正在使用以下代码，但一次只能完成我的一个要求(要么让背景颜色拉伸(stretch)，将子元素移动到左侧，要么让子元素位于正确的位置，但无法让背景颜色贯穿):

body {
  display: grid;
  grid-template: 
           "nav   nav   nav" 
           " .  content  . "
}

nav {
  background-color: lightblue;
  grid-area: nav;
}

nav ul {
  display: flex;
  list-style: none;
}

main {
  grid-area: content;
}

<nav>
  <ul>
    <li>item 1</li>
    <li>item 2</li>
  </ul>
</nav>

<main>
  <h1>content</h1>
</main>

据我了解，在使用 CSS 网格布局时，我只能放置网格容器的直接子元素。换句话说，我可以放置 nav但不是nav ul 。据推测，CSS Grid Layout Module Level 2将解除这个限制，并使这件事变得微不足道。但我需要一个目前有效的解决方案。

考虑到以下限制，我将如何解决这个问题:

• 解决方案必须仅包含 CSS(无 JavaScript 或框架)。
• 它必须是可维护的，例如如果我决定更改第一列的宽度，我不想更改两段(或更多)代码。
• 解决方案不必是通用的；我实际上只需要在一行中跨越单一纯色，以防产生影响。

---

更新:

读完答案我发现我的措辞太草率了。我所要求的与我想问的并不相符。我正在寻找一个基于 CSS 网格布局的解决方案，复制以下“传统”实现:

nav {
  background-color: lightblue;
}

.container {
  margin: auto;
  width: 80vw;
}

<nav>
  <div class="container">
    <a>item</a>
    <a>item</a>
  </div>
</nav>

<main>
  <div class="container">
    <p>content</p>
  </div>
</main>

我需要导航栏的背景颜色覆盖父元素的整个宽度，但实际内容为 <nav>和<main>在同一水平位置左对齐。

Answer 1

请注意 main 元素(一个 HTML5 语义上有意义的容器)如何消除对 div 容器的需求，这在 HTML5 之前很常见。

<!-- valid and efficient structure -->
<main>
  <h1>content</h1>
</main>

<!-- valid but inefficient structure -->
<main>
  <div>
     <h1>content</h1>
  </div>
</main>

为什么不将同样的原则应用到导航栏上？

有了 HTML5 nav 标签，为什么还要使用列表项？

而不是这个:

<nav>
   <ul>
      <li>item 1</li>
      <li>item 2</li>
   </ul>
</nav>

只需这样做:

<nav>
   <a>item 1</a>
   <a>item 2</a>
</nav>

这至少为您带来三个好处:

1. 一个干净且具有语义意义的元素，
2. 属于 Grid 父子关系范围内的 HTML 结构，并且
3. 通过一个与父网格占据相同空间的嵌套网格，您可以沿网格线对齐元素。

body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: " nav nav nav " 
                       " . content . "
}

nav {
  grid-area: nav;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background-color: lightblue;
}

main {
  grid-area: content;
}

<nav>
  <a>item 1</a>
  <a>item 2</a>
  <a>item 3</a>
</nav>

<main>
  <h1>content</h1>
</main>

还有其他方法可以实现您的布局，并且上面的代码概念可以应用于您的原始 HTML 结构(只需添加另一个嵌套网格)。我只是将其作为一种希望有用的方法提出。