Having problems with grid css layout

Question

I am trying to achieve a grid layout using Tailwind, but I have troubles of implementing it. I thought at first to use flex but I think that would be difficult to achieve.

So far I am using grid grid-cols-3 gap-4 and it looks like the picture below, but I want the chart status to be below the X-as and Lijen, bottom to be databak, algemeen and data/filters.

   <div className="h-full grid grid-flow-col-dense col-span-3 gap-4">
      <div className="row-span-3">
         1
      </div>
      <div className="col-span-2">
         2
      </div>
      <div className="row-span-2 h-full col-span-2">
         3
      </div>
   </div>

I cannot make the 3 element get the remaining height..

Answer 1

Take a look at this: https://tailwindcss.com/docs/grid-column

Basically, you want to span your cols.

<div class="grid grid-cols-3 gap-4">
  <div class="...">01</div>
  <div class="...">02</div>
  <div class="...">03</div>
  <div class="col-span-2 ...">04</div>
  <div class="...">05</div>
  <div class="...">06</div>
  <div class="col-span-2 ...">07</div>
</div>

And you can do the same for the rows, so you can get Chart status in the same col under leien.

<div class="grid grid-rows-3 grid-flow-col gap-4">
  <div class="row-span-3 ...">01</div>
  <div class="col-span-2 ...">02</div>
  <div class="row-span-2 col-span-2 ...">03</div>
</div>