【发布时间】：2021-03-02 02:08:39
【问题描述】：
我有以下用于显示过滤器选项的网格：
+------------------------------------------------------------------------------------------+
| |
| +-----------+ +-----------+ +-----------+ +-----------+ +-----------+ +-----------+ |
| | 1 | | 2 | | 3 | | 4 | | 5 | | 6 | |
| +-----------+ +-----------+ +-----------+ +-----------+ +-----------+ +-----------+ |
| |
+------------------------------------------------------------------------------------------+
这是相关的 CSS：
min-height: 0; /* NEW */
min-width: 0; /* NEW; needed for Firefox */
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(6, 1fr);
@media (max-width: 991.98px) {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 575.98px) {
width: 100%;
grid-gap: 0;
}
现在我有一个新要求，要求我隐藏任何会导致空列表的过滤器选项。假设只显示项目1、2 和3（尽管可以是任何数量的六个），那么目前我有：
+------------------------------------------------------------------------------------------+
| |
| +-----------+ +-----------+ +-----------+ |
| | 1 | | 2 | | 3 | |
| +-----------+ +-----------+ +-----------+ |
| |
+------------------------------------------------------------------------------------------+
我需要的是这样显示：
+------------------------------------------------------------------------------------------+
| |
| +-----------+ +-----------+ +-----------+ |
| | 1 | | 2 | | 3 | |
| +-----------+ +-----------+ +-----------+ |
| |
+------------------------------------------------------------------------------------------+
我可以使用 CSS 网格达到这个结果还是应该使用其他东西？
【问题讨论】：
-
你试过
align-items: end;这个容器吗？ -
是的，那是我的第一次尝试。不幸的是，它不起作用。
-
但是你使用的是没有类的属性吗？
-
很确定你不能用 CSS 来管理它。它将在网格中放置不可见的项目，因此 JS 是您更好的选择。
-
@HenriqueBarcelos 的“渲染”是指“添加到 HTML”吗？因为 CSS 控制着网站的“渲染”。