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

Question

bounty到期在7天内。该问题的答案有资格获得+ 50声望赏金。Ben Racicot正在寻找来自信誉良好的来源的答案：

如果没有JavaScript，这可能吗？答案不包含问题。

使用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

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