<分区>
我正在尝试根据视口(viewport)的宽度实现特定的图像布局。
基本上我想要这样:
我有一组图像并且一直在尝试使用 css 网格，但遇到溢出问题。
例如，假设我的桌面布局有 12 张图片，我可以用列和行很好地组织布局，但在调整大小时，我只想在一行中显示 ~3 张图片，如图片所示^。但是，在较小的设备上查看时，剩余的图像会被推到新的一行中，我不知道如何“隐藏”溢出并强制网格只呈现一行。
如何根据屏幕尺寸限制行数/元素数？
一种选择是使用屏幕宽度断点来检测屏幕的大小，并简单地限制数组中的元素数。这将消除元素溢出的问题，但这感觉很乱。
关于如何隐藏额外的元素，有没有人有更好的建议？并仅在需要时强制它为 1 行？
最佳答案
假设你有一堆 <img>您的 grid 中的标签并且您只想显示其中的 3 个，您可以使用 CSS 隐藏其他图像并重置 grid更好地匹配预期的模板:
@media (max-width: 768px) {
#container {
grid-template-columns: 1fr 1fr 1fr;
}
#container img:nth-child(n+4) {
display: none;
}
}
但是，请注意自 <img> 以来它仍然会导致网络使用。仍将是 DOM 的一部分。
关于javascript - 隐藏 CSS 网格中溢出的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62664092/