csscss-gridtailwind-css

Special grid layout with tailwindcss

I'd like to create this kind of layout:

Layout wanted in css

I want to use the popular utility css framework "Tailwindcss" to achieve that. Does anybody know how to proceed? Any direction would help me.

I'm sure this kind of structure is possible but I can't find anything around.

Also, the data are pulled out a database and arrive in the number order as in the picture.

Thanks so much in advance for your time!

Solution

  • Since Feb 2020 and Tailwind CSS v1.2 it became ridiculously easy to do this task :)

    <div class="grid grid-cols-4 grid-rows-3">
  <div>1</div>
  <div>2</div>
  <div class="row-span-2 col-span-2">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

    cool eh?

    Update 2023

    Still works fine: https://play.tailwindcss.com/q4RB94MPb8