Search code examples
htmlcsstailwind-csscss-grid

Can I configure CSS grid to lay out cells vertically first, based on the columns count and items count?

I have a CSS grid that has 4 columns.

I don't know the count of items to be placed there. I get that from an API.

I'm using Tailwind CSS. This is my style:

grid grid-cols-4 gap-4

However, when it fills the rows, it fills them horizontally:

  • First row
    • First column
    • Second column
    • Third column
    • Fourth column
  • Second row
    • First column
    • ...

However, I want it to be filled this way (vertically first)

  • First column
    • First row
    • Second row
    • Third row
    • Forth row
    • Nth row that is calculated automatically
  • Second column
    • First row
    • Second row
    • ...

I tried Grid auto flow, but none did that for me. Is it possible at all? If so, how can I do that?

Solution

  • If you cannot use JS to set the number of rows, you might look at this rather ugly solution.

    You can use column-4 without grid, although this also has limitations. The browser tries to spread the content evenly over the four columns. This means that if one cell has more content then the other, the rows will not be of equal height and the table will be a mess.

    To make rows stay only one line high, you can add whitespace-nowrap overflow-ellipsis overflow-hidden to each cell.

    Example in tailwind playground.

    <div class="columns-4 gap-0 border w-10/12 mx-auto mt-8">
  <div class="whitespace-nowrap overflow-ellipsis overflow-hidden border">row 1 col 1</div>
  <div class="whitespace-nowrap overflow-ellipsis overflow-hidden border">row 2 col 1</div>
  <div class="whitespace-nowrap overflow-ellipsis overflow-hidden border">row 3 col 1 this is a large piece of data that will do mess with the table if the overflow-hidden and nowrap is not set.</div>
  <div class="whitespace-nowrap overflow-ellipsis overflow-hidden border">row 4 col 1</div>
  <div class="whitespace-nowrap overflow-ellipsis overflow-hidden border">row 1 col 2</div>
  <div class="whitespace-nowrap overflow-ellipsis overflow-hidden border">row 2 col 2</div>
  <div class="whitespace-nowrap overflow-ellipsis overflow-hidden border">row 3 col 2</div>
  <div class="whitespace-nowrap overflow-ellipsis overflow-hidden border">row 4 col 2</div>
  <div class="whitespace-nowrap overflow-ellipsis overflow-hidden border">row 1 col 3</div>
  <div class="whitespace-nowrap overflow-ellipsis overflow-hidden border">row 2 col 3</div>
  <div class="whitespace-nowrap overflow-ellipsis overflow-hidden border">row 3 col 3</div>
  <div class="whitespace-nowrap overflow-ellipsis overflow-hidden border">row 4 col 3</div>
  <div class="whitespace-nowrap overflow-ellipsis overflow-hidden border">row 1 col 4</div>
  <div class="whitespace-nowrap overflow-ellipsis overflow-hidden border">row 2 col 4</div>
  <div class="whitespace-nowrap overflow-ellipsis overflow-hidden border">row 3 col 4</div>
  <div class="whitespace-nowrap overflow-ellipsis overflow-hidden border">row 4 col 4</div>
</div>