前提
CSS网格的一个美丽的方面是能够将DOM元素自由地放置在网格上，如下所示：
<body>
<nav>navigation</nav>
<main>main content</main>
<aside>sidebar</aside>
<footer>footer</footer>
</main>
body {
display: grid;
grid-template-columns: 7fr 1fr;
grid-auto-rows: 100px;
grid-gap: 10px;
grid-template-areas: "nav nav"
"content sidebar"
"meta sidebar"
"footer footer";
}
nav { grid-area: nav; }
main { grid-area: content; }
aside { grid-area: sidebar; }
footer { grid-area: footer; }
问题
到目前为止还不错。但是，如果我在根元素中有一个元素，我想把它放在网格上：
<body>
<nav>navigation</nav>
<main>
<h1>content</h1>
<!-- New! -->
<article>some data</article>
</main>
<aside>sidebar</aside>
<footer>copyright 2020</footer>
</main>
article { grid-area: meta; }
那不管用。这篇文章没有进入元网格领域我想构建语义正确的DOM结构，在我的实际生活中，它让我把元素放在其他嵌套元素中。但我想在页面上自由浏览它们，这取决于视觉呈现(甚至响应能力(。
这是可以实现的吗
否，您需要提前声明网格内容。网格布局是为在这方面"固定"的内容而设计的。如果您希望在不同布局/屏幕大小的网格中显示不同的内容，请使用媒体查询以这些分辨率定义新的网格布局。
来自文档开头的W3C规范摘要：
这个CSS模块定义了一个基于二维网格的布局系统，针对用户界面设计进行了优化。在网格布局模型中，网格容器的子级可以定位到预定义的灵活或固定大小布局网格中的任意槽中。
(强调矿(
这里的关键是一个"；预定义的"；布局网格。您可以将内容动态插入网格，只要您提前考虑为该内容提供空的网格轨迹、行、单元格等。否则，你就倒霉了。