时间戳

首页 > 解决方案 > 是否可以使用可选的页眉或页脚行动态数量的 CSS Grid 列

html - 是否可以使用可选的页眉或页脚行动态数量的 CSS Grid 列

问题描述

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

.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 {
    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 Grid 可以实现这种动态特性吗？

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

回答
Paulie_D 的笔并没有解决任何问题，而是演示了问题。

答案是 CSS Grid 无法做到这一点。事实上几乎所有情况下我们都需要指定列。就我之前的观点而言，这削弱了使用网格 IMO 的好处。

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

// CSS
.grid {
    grid-template-columns: 1fr 1fr 1fr;
}
header,footer {
    grid-span: 1 / -1;
}

标签： htmlcsscss-grid

解决方案

我注意到如果我理解你的问题，让我看看：

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

推荐阅读