I have a set of cards, whose have their own cards, like this (i am using TailwindCSS btw):
<script src="https://cdn.tailwindcss.com"></script><div class="grid grid-cols-3 gap-4"><div class="flex flex-wrap justify-between gap-4 border"><div class="flex-grow">Content 1</div><div class="flex-grow">Content 2</div><div class="flex-grow">Content 3</div></div><div class="flex flex-wrap justify-between gap-4 border"><div class="flex-grow">Content 4</div><div class="flex-grow">Content 5</div></div></div>The end result will be something like this, which is fine:a image showing the rendered result of the cards
But depending on screen size, i can get a result like this:
a image showing the rendered result of the cards with a gap on the second card
So, what i want to do is that, when there is room available, the "mini cards" act like rows instead of columns, like this (but dynamic):
a image showing the rendered result of the cards without a gap on the second card
<script src="https://cdn.tailwindcss.com"></script><div class="grid grid-cols-3 gap-4"><div class="flex flex-wrap justify-between gap-4 border"><div class="flex-grow">Content 1</div><div class="flex-grow">Content 2</div><div class="flex-grow">Content 3</div></div><div class="flex flex-wrap flex-col justify-between gap-4 border"><div class="flex-grow">Content 4</div><div class="flex-grow">Content 5</div></div></div>Is there a way to achieve this with CSS?
