Hi, I am playing around with Grid in Tailwind as I find myself always using flexbox, so I want to learn something new. If I have a simple little Div Grid set up. I want the work out how to get the middle row to stretch to fit the height of the page. So it will be row 1 (h-10), row 2 (stretch) row 3 (h-10) - your help is appreciated!
<div class="grid grid-cols-4 grid-rows-3 w-full h-full gap-2 bg-red-200 min-h-screen">
<div class="h-10 col-span-4 bg-gray-300"></div>
<div class="bg-gray-300 h-full"></div>
<div class="bg-gray-500 col-span-3 h-full"></div>
<div class="h-10 col-span-4 bg-gray-500"></div>
</div>
I'm a little confused by your question as it seems as though you are mixing up widths and heights. But to accomplish what you are after, you might want to use col-start-* / col-end-* along with the row variants so that you can set up your grid areas exactly how you want.
Please or to participate in this conversation.