How to break the row with grid in tailwind - css

Question

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.

Answer 1

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
}