CODEWITHSUNDEEP
htmlcsstailwind-css
A Tyshka
A Tyshka

Reputation: 4090

How to size column height properly in Tailwind?

I'm learning Tailwind (migrating from bootstrap) and I'm struggling to figure out how to appropriately size column heights. Here I have a 2-column layout:

<div id="app" class="bg-slate-200 h-screen p-4" data-v-app="">
  <div class="w-full h-full">
    <div class="columns-2">
      <div class="rounded p-4 bg-white">
        <h1 class="text-3xl">Box 1</h1>
        <div class="columns-1 space-y-2">
          <div class="w-full"><button class="rounded border border-green-400 p-2 text-green-600 w-full">Button 1</button></div>
          <div class="w-full"><button class="rounded border border-green-400 p-2 text-green-600 w-full">Button 2</button></div>
        </div>
      </div>
      <div class="rounded p-4 bg-white">
        <h1 class="text-3xl">Box 2</h1>
        <div class="columns-1 space-y-2">
          <div class="w-full"><button class="rounded border border-green-400 p-2 text-green-600 w-full">Button 1</button></div>
           <div class="w-full"><button class="rounded border border-green-400 p-2 text-green-600 w-full">Button 2</button></div>
        </div>
      </div>
    </div>
  </div>
</div>

enter image description here

This renders just fine when the content is equal height. However, when I make one of the columns shorter, like so:

<div id="app" class="bg-slate-200 h-screen p-4" data-v-app="">
  <div class="w-full h-full">
    <div class="columns-2">
      <div class="rounded p-4 bg-white">
        <h1 class="text-3xl">Box 1</h1>
        <div class="columns-1 space-y-2">
          <div class="w-full"><button class="rounded border border-green-400 p-2 text-green-600 w-full">Button 1</button></div>
          <div class="w-full"><button class="rounded border border-green-400 p-2 text-green-600 w-full">Button 2</button></div>
        </div>
      </div>
      <div class="rounded p-4 bg-white">
        <h1 class="text-3xl">Box 2</h1>
        <div class="columns-1 space-y-2">
          <div class="w-full"><button class="rounded border border-green-400 p-2 text-green-600 w-full">Button 1</button></div>
        </div>
      </div>
    </div>
  </div>
</div>

I get the following result: enter image description here

You can see some of the bottom padding for the first column is cut off by its parent not being tall enough, and there is some extra padding added on the top of the second column. Here's what the box layout looks like in the inspector: enter image description here enter image description here

The expected behavior would be the parent 2-column element sizing its height to be tall enough so that it does not clip the taller column. The shorter column should also be top-aligned without that weird extra top margin. Here's a live example, any help would be greatly appreciated! https://jsfiddle.net/xm9g4jfr/1/

Upvotes: 0

Views: 2591

Answers (2)

MagnusEffect
MagnusEffect

Reputation: 3905

You can do this for a larger screen

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
<div class="container mx-auto bg-gray-300 p-6">
  <div class="flex flex-col">
    <div class="-mx-4 flex flex-col items-stretch lg:flex-row">
      <div class="flex-1 p-4">
        <div class="block h-full overflow-hidden rounded-lg border bg-white shadow-md transition ease-in-out sm:flex-row">
          <div class="p-4 sm:ml-16 md:ml-32 lg:ml-0">
            <!-- heading -->
            <div class="-mx-2 flex flex-wrap sm:mx-auto sm:mb-2">
              <div class="p-4">
                <h1 class="text-3xl">Box 1</h1>
                <div class="space-y-2">
                  <div ><button class="w-96 rounded border border-green-400 p-2 text-green-600">Button 1</button></div>
                  <div ><button class="w-96 rounded border border-green-400 p-2 text-green-600">Button 2</button></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>


      <div class="flex-1 p-4">
        <div class="block h-full overflow-hidden rounded-lg border bg-white shadow-md transition ease-in-out hover:cursor-pointer sm:flex-row">
          <div class="p-4 sm:ml-16 md:ml-32 lg:ml-0">
            <!-- heading -->
            <div class="-mx-2 flex flex-wrap sm:mx-auto sm:mb-2">
              <div class="p-4">
                <h1 class="text-3xl">Box 1</h1>
                <div class="space-y-2">
                  <div ><button class="w-96 rounded border border-green-400 p-2 text-green-600">Button 1</button></div>
                  <div ><button class="w-96 rounded border border-green-400 p-2 text-green-600">Button 2</button></div>
                  <div ><button class="w-96 rounded border border-green-400 p-2 text-green-600">Button 1</button></div>
                  
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

stickyuser
stickyuser

Reputation: 2890

The columns property is designed for flowing text into multiple columns so I wouldn't recommend using it in this case.

If you take out columns-2 and replace it with a grid layout, grid grid-cols-2 gap-x-6, that should give you what you are after.

https://play.tailwindcss.com/EDzOYOTSnU

Upvotes: 1

Related Questions