0

Is it possible to generate a grid where the column items adapt to the content and remain in a mosaic layout with Tailwind CSS?

For example, if I add divs or collapse items, the size should grow and the same in reverse.

Actual: enter image description here

Expected: enter image description here

Code:

<div class="p-10 bg-slate-200">
<div class="mt-10 grid grid-cols-2 justify-center gap-4 md:grid-cols-2 lg:grid-cols-2">
  <div class="bg-red-400">
    <div>TEST</div>
    <div>TEST</div>
    <div>TEST</div>
    <div>TEST</div>
  </div>
  <div class="bg-red-200">02</div>
  <div class="bg-red-200">03</div>
  <div class="bg-red-400">
    <div>TEST</div>
    <div>TEST</div>
    <div>TEST</div>
    <div>TEST</div>
  </div>
</div>
</div>
AStombaugh
  • 2,930
  • 5
  • 13
  • 31
nawelittle
  • 293
  • 2
  • 3
  • 8
  • have you tried span? look at the docs here: https://tailwindcss.com/docs/grid-row – Salman Malik Jun 16 '22 at 16:13
  • @SalmanMalik, yes but no works like i expected. If a column is bigger, the one next to it has that size – nawelittle Jun 16 '22 at 16:27
  • Here you go, you can create rows and make it flow to cols and then simply span the rows to replicate what you desire here: https://play.tailwindcss.com/wNYs81xFmL – Salman Malik Jun 17 '22 at 08:15

0 Answers0