css Question posted in
Some basic documentation can be found here.

Tailwind CSS: Grid with preset cols does not take up the space of its child

https://play.tailwindcss.com/XiH6j3pUry (see live code)

<main class="flex flex-col">
  <div class="grid h-full w-full items-center justify-center gap-8 bg-red-500 grid-cols-2 p-5">
    <div class="flex h-full w-full flex-col items-center justify-center gap-6 bg-blue-500"></div>
  </div>
</main>

In this minimum example, there exists a main container that is flexed with columns.
Inside of it is the grid, which has cols of 2. And its child takes up a certain amount of space. How can I make the grid cover the child as it would if it was a flexbox? Shouldn’t it already be doing this?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Solution:

    Contain the grid with a flex container

    <main class="flex flex-col">
<div class="flex"
  <div class="grid h-full w-full items-center justify-center gap-8 bg-red-500 grid-cols-2 p-5">
    <div class="flex h-full w-full flex-col items-center justify-center gap-6 bg-blue-500"></div>
  </div></div>
</main>

  2. 0

    Flex and Grid has a similar concept of organizing divs in a column or row. When you added flex in parent div, it didn’t reflected a preset column because of the grid that you added in the child. Grid and Flex each has their own preset that don’t need to mix together. Here’s Tailwind’s sample on flex https://tailwindcss.com/docs/flex Hope this helps!

    Here’s my attempt in simplifying Flex as parent and Flex-auto in child

    <main class="container"> 
<div class="flex h-full w-full items-center text-center gap-8 bg-red-500 grid-cols-2 p-5">
<div class="flex-auto h-full gap-6 bg-blue-500">second child</div>
<div class="flex-auto h-full gap-6 bg-blue-500">second child</div></div></main>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search