Nuxt•6mo ago

Centered grid with different-sized children

I have this markup

<div class="flex flex-col items-center gap-2">
    <div id="parent" class="bg-yellow-500 h-10 w-10"></div>
    <div id="child" class="grid grid-cols-2">
        <div class="bg-blue-200 h-10 w-40"></div>
        <div class="bg-green-200 h-10 w-10"></div>
    </div>
</div>

<div class="flex flex-col items-center gap-2">
    <div id="parent" class="bg-yellow-500 h-10 w-10"></div>
    <div id="child" class="grid grid-cols-2">
        <div class="bg-blue-200 h-10 w-40"></div>
        <div class="bg-green-200 h-10 w-10"></div>
    </div>
</div>

This looks correctly to what I want, but the problem is that the grid is taking up too much space. I'd the two children of the grid to grow left/right, while the "center" of the grid is still in the center of the parent div. So the result I'm looking for is the red box on the 2nd screenshot. I'm unsure if this is achievable with a grid at all, or if it should be done with flex instead.

1 Reply

ægteemilOP•6mo ago

https://play.tailwindcss.com/XJmn9aeZx7

Tailwind Play

An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.

Gaming

Programming

Centered grid with different-sized children