我可以自定义CSS网格吗？

Question

对不起，我的英语不好。 我正在创建一个加载图像的应用程序。我有一个CSS网格并通过无限滚动加载新图像。之后，新图像将添加到网格中。

我有问题。添加新图像时，先前图像会更改位置。我认为是因为网格确实在搜索添加位置。

我可以将新图像放置到网格中并且不会丢失先前图像的位置吗？例如，例如在Google（“图片”标签）中。

<!--Images grid-->
<div class="images-grid">
    <div class="item"><img src="..." /></div>
    <div class="item"><img src="..." /></div>
    <div class="item"><img src="..." /></div>
    <div class="item"><img src="..." /></div>
    <div class="item"><img src="..." /></div>
    <div class="item"><img src="..." /></div>
    <div class="item"><img src="..." /></div>
</div>

CSS

.images-grid {
    display: grid;
    column-count: 4;
    column-gap: 0;
}

我更改了CSS代码：

.images-grid {
    display: flex;
    flex-wrap: wrap;
}

我得到的块具有相同的高度。

我需要不同高度和相同宽度的图像。 （像这儿）

Answer 1

尝试一下...我只将您的“ 网格列：4; ”替换为“ 网格模板列：repeat（ 4，1fr）; “

.images-grid {
    display: grid;
    /*grid-column: 4;*/
    grid-template-columns: repeat(4, 1fr);
    column-gap: 0;
}