我有一个简单的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;
}<html>
<body>
<nav>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</nav>
<main>
<h1>content</h1>
</main>
</body>
</html>据我了解，使用CSS网格布局时，我只能放置网格容器的直接子元素。换句话说，我可以放置nav，但不能放置nav ul。据推测，CSS Grid Layout Module Level 2将解除此限制，并使其变得微不足道。但是我需要一种今天可以使用的解决方案。
鉴于以下限制，我将如何处理：
我有一个简单的CSS网格布局，其中包含三列。我需要使第一行的背景在整个轨道上延伸，但要使子元素在内部网格线上对齐，例如标准的导航栏...
请注意main元素（一个具有HTML5语义意义的容器，如何消除了对div容器的需要，而这在HTML5之前是常见的。