Cannot get tailwind grid's columns to behave the way I want

I'm trying to create a Bento like grid with the following code:

<div class="grid-rows-12 grid grid-cols-12 gap-4 [&>*]:rounded-sm [&>*]:bg-fuchsia-600">
  <div class="col-span-6 col-start-1 row-span-6 row-start-1">01</div>
  <div class="col-span-3 col-start-7 row-span-3 row-start-1">02</div>
  <div class="col-span-3 col-start-7 row-span-3 row-start-4">03</div>
  <div class="row-span-10 col-span-3 col-start-10 row-start-1">04</div>
  <div class="col-span-4 col-start-1 row-span-6 row-start-7">05</div>
  <div class="col-span-5 col-start-5 row-span-4 row-start-7">06</div>
  <div class="row-start-10 col-span-8 col-start-5 row-span-2">07</div>
</div>

I want the column 04 to occupy 10 rows but it never expands like other blocks. I have tried playing around with the height values for this column but nothing seems to work.

Here's a tailwind play link with the same: https://play.tailwindcss.com/45q49qt5iQ

How do I make the column 4 fully occupy the available space in the grid?

Solution

It seems like you have misinterpreted or not read the documentation for the grid-row-start/end set of classes – you have added row-span-10 perhaps assuming this class exists by default. However with no customized configuration, the row-span-<number> set of class names range from 1 to 6 only.

To resolve this, you could consider using an arbitrary value class, row-[span_10/span_10]:

<script src="https://cdn.tailwindcss.com/3.3.5"></script>

<div class="grid-rows-12 grid grid-cols-12 gap-4 [&>*]:rounded-sm [&>*]:bg-fuchsia-600">
  <div class="col-span-6 col-start-1 row-span-6 row-start-1">01</div>
  <div class="col-span-3 col-start-7 row-span-3 row-start-1">02</div>
  <div class="col-span-3 col-start-7 row-span-3 row-start-4">03</div>
  <div class="row-[span_10/span_10] col-span-3 col-start-10 row-start-1">04</div>
  <div class="col-span-4 col-start-1 row-span-6 row-start-7">05</div>
  <div class="col-span-5 col-start-5 row-span-4 row-start-7">06</div>
  <div class="row-start-10 col-span-8 col-start-5 row-span-2">07</div>
</div>

Or modify your Tailwind configuration to have row-span-10 as a possible class :

tailwind.config = {
  theme: {
    extend: {
      gridRow: {
        'span-10': 'span 10 / span 10',
      },
    },
  },
};

<script src="https://cdn.tailwindcss.com/3.3.5"></script>

<div class="grid-rows-12 grid grid-cols-12 gap-4 [&>*]:rounded-sm [&>*]:bg-fuchsia-600">
  <div class="col-span-6 col-start-1 row-span-6 row-start-1">01</div>
  <div class="col-span-3 col-start-7 row-span-3 row-start-1">02</div>
  <div class="col-span-3 col-start-7 row-span-3 row-start-4">03</div>
  <div class="row-span-10 col-span-3 col-start-10 row-start-1">04</div>
  <div class="col-span-4 col-start-1 row-span-6 row-start-7">05</div>
  <div class="col-span-5 col-start-5 row-span-4 row-start-7">06</div>
  <div class="row-start-10 col-span-8 col-start-5 row-span-2">07</div>
</div>