是否可以完全自由漫游/将我的 DOM 元素放置在 CSS 网格中？

Question

前提

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 结构，在我的现实生活中，我将元素放入其他嵌套元素中。但我想根据视觉呈现（甚至响应能力）在页面上自由漫游它们。

这是可以实现的吗？

Answer 1

不行，需要提前声明网格内容。网格布局专为在这方面 'fixed' 的内容而设计。如果您希望在不同 layouts/screen 大小的网格中显示不同的内容，请使用媒体查询在这些分辨率下定义新的网格布局。

来自文档开头的W3C spec摘要：

This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid.

（强调我的）

这里的关键是“预定义”布局网格。您可以动态地将内容插入网格 只要您提前考虑为该内容提供空的网格轨道、行、单元格等 。否则，你就倒霉了。

是否可以完全自由漫游/将我的 DOM 元素放置在 CSS 网格中？

Is it possible to completely freely roam / place my DOM elements with CSS grid?

html

css-grid

semantic-markup

前提

问题