在 CSS Grid 中隐藏溢出的项目 [关闭]答案

【问题标题】：Hide overflowing items in CSS Grid [closed]在 CSS Grid 中隐藏溢出的项目 [关闭]
【发布时间】：2020-06-30 18:37:14
【问题描述】：

我正在尝试实现取决于视口宽度的特定图像布局。

基本上我想要这样：

我有一组图像，并且一直在尝试使用 css 网格，但是遇到了溢出问题。

例如，假设我有 12 个用于桌面布局的图像，我可以用列和行很好地组织布局，但是在调整大小时，我只希望在单行中显示约 3 个图像，根据图像^。但是，在较小的设备上查看时，剩余的图像会被推入新行，我无法弄清楚如何“隐藏”溢出并强制网格仅呈现一行。

如何根据屏幕大小限制行数/项目数？

一种选择是使用屏幕宽度断点检测屏幕的大小，并简单地限制数组中的项目数。这样可以解决溢出元素的问题，但是感觉很乱。

关于如何隐藏多余的元素，有没有人有更好的建议？并仅在需要时将其强制为 1 行？

【问题讨论】：

一些代码？拜托，这真的很有帮助。
对每个尺寸使用 mediaQueries 并为每个媒体查询放置每个 css 代码

标签： javascript css css-grid

【解决方案1】：

假设您的 grid 中有一堆 <img> 标记，并且您只想显示其中的 3 个，您可以使用 CSS 隐藏其他图像以及重置 grid 模板以更好地匹配预期：

@media (max-width: 768px) {
    #container {
        grid-template-columns: 1fr 1fr 1fr;
    }
    #container img:nth-child(n+4) {
        display: none;
    }
}

但是，请注意它仍然会导致网络使用，因为 <img> 仍然是 DOM 的一部分。

【讨论】：

【解决方案2】：

您可以使用 CSS 媒体查询，例如，如果这是您用于网格系统的原始代码：（这是基于您的第一个结果）

.my-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

这会将网格系统分为 3 列，这由 1fr 显示，这基本上是 3 列中的一小部分，这意味着一个元素将占据总宽度的 1/3(列）。对于较大的设备，请使用媒体查询：

@media screen and (min-width: 800px) {
    .my-grid {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        /* each element will occupy 1/4 of the width */
    }
}

然后对于超大设备，只需增加 min-width 的大小，在这种情况下，这是您定位的设备的最小宽度：

@media screen and (min-width: 1200px) {
    .my-grid {
         grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
         /* each element will occupy 1/6th of the width */
    }
}

例如，您只想拥有 1 行，正如您所提到的，使用 grid-temaplate-rows 会将元素设置为水平位置，这样您就可以定义要在网格系统中显示的行数：

.my-grid {
     grid-template-rows: 1fr;
}

这会将行数限制为 1，对于 2 行，它将变为 grid-template-rows: 1fr 1fr; ... 等等

【讨论】：