How can I create a grid with 4 columns but if there are only 3; they take the full width?

[maxpaleo]

Hi guys,

This is probably a a ridiculous question; but for the life of me; I can't figure it out!

I have been struggling with creating a simple grid layout with Tailwind, where the maximum number of columns in a row should be 4 if there are 4 columns, but there should be 3 columns if there are only 3.

I am from Bootstrap, which is pretty straightforward, but I can't seem to get it right with TW.

Note: I am trying to avoid using JS for this as well.

Summary:

• The grid needs a layout with a maximum of 4 columns.
• If there are 5 columns, it should display 4 in one row and 1 in the second. (I figured out this part)
  -If there are 3 columns, the columns should expand to fill the width of the row.
  -if there is just 1 column, it takes the full width.

[alex-krasikau]

Hey @maxpaleo!

Here's the solution:

grid grid-cols-[repeat(auto-fit,minmax(calc((100%-16px*3)/4),1fr))] gap-4

In this code, 16px is the column gap size. It ensures each column has a minimum width equal to one card in a 4-column layout. The calculation (100%-16px*3)/4 determines the card width in a 4-column layout (removes the gaps and divides by 4). Any extra space will be evenly distributed among the cards.

You can view a complete example here: Tailwind Play Example.

Please let me know if you have any questions.