Flex layout with grid system in tailwind

Question

I have created a flex layout bellow:

<div class="min-h-screen flex flex-col">
    <div class="bg-gray-400 h-12 flex-shrink-0 header">Header</div>
    <div class="bg-gray-300 flex-grow content">Content</div>
    <div class="bg-gray-400 h-12 flex-shrink-0 footer">Footer</div>
  </div>

Now I want to achieve same thing with grid. What I tried is bellow.

<div class="min-h-screen grid grid-rows-3">
  <div class="bg-gray-400 h-12 header">Header</div>
  <div class="bg-gray-300 content">Content</div>
  <div class="bg-gray-400 h-12 footer">Footer</div>
</div>

But this does not give me what I expected. Any help ? I expect it to be

Answer 1

This will works:

<div class="min-h-screen grid grid-rows-[48px,1fr,48px]">
  <div class="bg-gray-400 h-12 header">Header</div>
  <div class="bg-gray-300 content">Content</div>
  <div class="bg-gray-400 footer">Footer</div>
</div>