有没有办法让网格项目在自动调整前一行/列项目大小时始终具有相同的间隙?

问题描述 投票:0回答:1

我有一个 3 列网格,其项目的高度根据其内部内容的数量而变化。目前,下一列将始终遵循最大的项目作为间隙的起点,如下所示:

我希望每个网格项目都遵循前一列和行,并且不会由于同一列上的其他项目比其他项目大而产生额外的不需要的空间:

有没有办法实现这种造型?我想指出的是,我没有手动设置项目高度。我看到另一篇帖子有类似的问题,但该人正在为他们的网格项目使用设定的高度,而不是像我一样根据其内容进行扩展。

css grid
1个回答
0
投票

只需使用列属性而不是网格。

例如:

.container{
    columns: 3
}

.item{
    break-inside: avoid
}

你会得到类似的东西: https://ayushm.vercel.app/#projects

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.