动态CSS Grid列可能带有可选的页眉和页脚

Question

使用CSS Grid，动态列数很容易。

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

// these .cells layout nicely
<div class="grid">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
</div>

但是具有页眉和/或页脚的更复杂的布局呢？

// doesnt work
grid-template-columns: 1fr, repeat(auto-fit, minmax(100px, 1fr)), 1fr;

<div class="grid">
    <header></header>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <footer></footer>
</div>

[这似乎不可能不通过将单元格包装在容器中来启动新的网格...这是我希望在此处采用网格来避免的。

也不能使用模板区域，因为关键是页眉和页脚是可选的。

CSS网格可以实现这种动态特性吗？

UPDATE：这似乎不可能。我使用JS更改了CSS自定义属性以更新网格列。

Answer 1

请注意，如果我了解您的问题，请让我看看：

[如果要使用全角页眉/页脚以及介于三列之间的网格，只需将<header>和<footer> grid-column属性设置为span 1 / -1。这样，您可以明确地说您希望它们占据的宽度等于第一列到最后一列的末尾。