许多项目显示在相同位置 CSS 网格

Question

我有大量节点列表，我想在网格布局中显示。

在某些时候，超过 2500 件物品，少于 3500 件物品这些盒子似乎会倒塌。

我不知道是什么问题。

是不是海量的div？因为我的 CSS 对于少于 2500 个项目绝对没问题。

那是 CSS，用于那些框：

.products-group div.products-box{
    display: grid;
    grid-template-columns: 30% 30% 30%;
    column-gap: 5%;
    row-gap: 2em;
    grid-auto-rows: auto;
}

.product{
    display: block;
    align-self: start;
}

那是我的 HTML:

<div class="products-group" data-group="{{group}}">
    
    <div class="controlls">
        <button class="drop">&#10507;</button>
        <h2>{{group}} ({{count}})</h2>
    </div>

    <div class="products-box">
        <div class="product hidden" data-sku="{{sku}}">
            <p>{{report}}</p>
            <button value="{{screenshot}}" onclick="show_picture(this)">Beweisbild</button>
        </div>

        ...

    </div>
</div>

Answer 1

看起来 HTML、CSS 或 CSS 之一 - 网格无法显示超过 3k 个子节点。

我看到的唯一方法是再构建几个“产品框”div，并在其中仅显示 100 个子 div。

<div class="products-group" data-group="{{group}}">
    
    <div class="controlls">
        <button class="drop">&#10507;</button>
        <h2>{{group}} ({{count}})</h2>
    </div>

    <div class="products-box">
        <div class="product hidden" data-sku="{{sku}}">
            <p>{{report}}</p>
            <button value="{{screenshot}}" onclick="show_picture(this)">Beweisbild</button>
        </div>
        <!--99 more-->
       
     </div>
</div>

许多项目显示在相同位置 CSS 网格

Many items are displayed in the same position CSS grid

html

css

css-grid