Auto resize grid cols when less number specified - tailwind

Question

So, I am using tailwind grid, I have specified 6 cols for each row, though if the number of elements are less than 6, I want it to resize it to 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>

Additionally, I want that they should take n/kth width only if n is the number of current columns and k is the total columns in each grid row.

Answer 1

You can try changing the Tailwind classes dynamically, for example:

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