Question

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

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>的实际内容在同一水平位置上左对齐。 / p>

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>

这至少为您提供了三个好处：

干净且具有语义意义的元素
属于Grid父子关系范围内的HTML结构，并且
具有一个嵌套网格，该网格与父网格占用的空间相同，因此您可以沿着网格线对齐项目。

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结构（只需添加另一个嵌套网格）。我只是将其作为一种有用的方法提出。

Answer 2

您的问题来自在主体标签上使用grid样式。将它们向下移至要格式化的各个部分：

main,
header ul.menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

main .content {
  grid-column: 2/3;
}

header ul.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: lightblue;
}

header ul.menu li {
   margin: 1em;
}

header ul.menu li:not(:first-child){
   margin-left: 0;
}

<header>
  <nav>
    <ul class="menu">
      <li>item 1</li>
      <li>item 2</li>
    </ul>
  </nav>
</header>

<main>
  <div class="content">
    <h1>content</h1>
  </div>
</main>

在内部网格线处对齐子元素

2 个答案: