css - 网格视图产品内容的累积布局移位

Question

我们的网格视图产品存在 cls 问题。

我们发现，如果我们使用以下 css，这将停止 cls 问题：

#grid_view_products_page_container, #content {
max-width: 1000px;
}

不过，这有一个问题。在最大宽度设置为 1000 像素的大型桌面设备上，由 4 个产品组成的产品网格视图不会填满页面中间的整个内容部分。显然我们可以增加 max-width 来纠正这个问题，但这会导致 cls 问题。

一直在努力寻找解决此问题的方法，以便我们可以让产品在更大的桌面设备上填充屏幕内容，而不会出现累积布局 (CLS) 问题。

任何超过 1000px 的数字都会导致 cls 问题。1000px 及以下，不存在 cls 问题。

标签： cssgridviewcumulative-layout-shift