当指定的数量较少时，自动调整网格列的大小-顺风

Question

所以，我使用顺风网格，我为每行指定了6列，但如果元素数量少于6，我希望它将其调整为3。

<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 grid-flow-row gap-2">
{data.map((d)=><SomeComponent/ d={d}>)}
</div>

此外，我希望只有当n是当前列的数量，k是每个网格行中的总列时，它们才应该采用第n/k个宽度。

Answer 1

您可以尝试动态更改Tailwind类，例如：

<div className={"w-full grid lg:w-auto" + (condition ? 'grid-cols-3' : 'grid-cols-6')}>