row-span-1 not working for grid cell

[tian-yan]

For example, 10 rows + 1 col grid (grid cell #1 takes 1st row grid cell #2 takes 2nd~9th rows, and last grid cell takes 10th row). If only grid cell #1 has contents (other 2 grid cells <div> have not yet coded), then grid cell #1 will take the full height of screen even though row-span-1 is in place.
Demo code from Tailwind CSS Playground is here.
I want to setup the placeholder even though contents are not yet added, assure 1st grid cell only & always takes desired height. is using h-1/10 class the best practice to achieve so ?
Below Post makes me think whether using grid is recommended / best practice when developing the major layout of webpage. perhaps I should use flex ?

The issue with using flex for grids (which let's be honest is hardly an issue, flex is amazing 😍), is that the margins are don't count as part of the columns. Meaning, you'll get 1/3 + 1/3 + 1/3 plus your margins, which is over 100%. This is causing the wrapping you're seeing.

As you've just noted, you just need to use negative margins and padding:

<div class="flex flex-wrap -mx-4">
    <div class="w-1/3 px-4"></div>
    <div class="w-1/3 px-4"></div>
    <div class="w-1/3 px-4"></div>
    <div class="w-1/3 px-4"></div>
    <div class="w-1/3 px-4"></div>
    <div class="w-1/3 px-4"></div>
    <div class="w-1/3 px-4"></div>
    <div class="w-1/3 px-4"></div>
</div>

Originally posted by @reinink in #32 (comment)

[amantiwari1]

just remove h-screen and it might works

[adamwathan]

Hey, the issue here is that there is no grid-rows-10 class in Tailwind by default. Once you add it to your config file it works as you'd expect:

https://play.tailwindcss.com/05qi4m09r6?file=config