是否可以使用CSS网格完全自由地漫游/放置我的DOM元素？

问题描述

前提

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 spec摘要：

此CSS模块定义了基于二维网格的布局系统，该系统针对用户界面设计进行了优化。在网格布局模型中，可以将网格容器的子级放置在预定义的灵活或固定大小的布局网格中的任意插槽中。

（重点是我的）

此处的键是“预定义”布局网格。只要您提前考虑为该内容提供空的网格轨迹，行，单元格等，就可以将内容动态地插入到网格中。否则，你很不走运。

css-grid html semantic-markup