Search code examples
cssgridrowtailwind-css

How to break the row with grid in tailwind

I use Tailwind CSS, I attach an image of my project. Here I try to break the row. I explain I would like that whatever the size of the cards of the first row, those of the second row comes to be put directly below. If I understood correctly I have to assign classes to the children but the children are from a database and so they all have the same model component. I tried the row-auto class, but it doesn't work.

Project with grid template

Solution

  • Finally I found a simple and effective solution, I share it with you if other people would be in the same use case as me.

    I use Css attribute : columns-count on the parent (columns-{nb-col} in Tailwind) and on the child i use 'break-inside' wit the value 'avoid-column'to avoid that a card overflows on another column (break-inside-avoid-column in Tailwind)

    Example :

    Html :

    <div class="csscolumn">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
</div>

    CSS:

    .csscolumn {
  column-count: 3;
}

.child {
    break-inside: avoid-colum
}