CODEWITHSUNDEEP
htmlcsstailwind-css
Source Matters
Source Matters

Reputation: 1221

Tailwind grid row height to prevent stretching to all same height of "tallest" row

EDIT 2: Here's an example with filler text added: https://play.tailwindcss.com/KPrBMJr6vI

You can see at "2XL" viewport width, that Blocks 3 and 4's heights are super tall. Block 5 behaves as I would like, but I now need just Block 3 and 4 to remain the height of each of their respective sets of content requires.

EDIT 1: It appears when I remove all the "grid-rows-X" definitions from the outer-most div, they all start to behave exactly as I want, with the exception of when it's at 2xl media size. Everything below that works perfect it seems. Not sure what definitions to add to get Block 3, 4, and 5 to auto-height to content, but stretch 5 to "fill".

I have the layout/code below:

<div class="grid-rows-7 mt-2 grid grid-cols-1 gap-2 text-white lg:mt-4 lg:grid-cols-5 lg:grid-rows-6 lg:gap-4 2xl:grid-rows-5">
  <div class="col-span-1 rounded-lg bg-white p-4 shadow dark:bg-zinc-950 lg:col-span-5">
    <div class="relative h-auto overflow-hidden rounded-lg"></div>
  </div>

  <div class="col-span-1 col-start-1 row-span-1 row-start-2 rounded-lg bg-white p-4 shadow dark:bg-zinc-950 lg:col-span-2 lg:row-span-4 2xl:col-span-2 2xl:row-span-3">Block 2: Left Column</div>

  <div class="col-span-1 col-start-1 row-start-3 rounded-lg bg-white p-4 shadow dark:bg-zinc-950 lg:col-span-3 lg:col-start-3 lg:row-start-2 2xl:col-span-2 2xl:col-start-3 2xl:row-start-2">
    <h5 class="mb-4 text-xl font-medium text-gray-500 dark:text-white">Block 3</h5>
    <div class="mb-4 items-center justify-between pl-3 pr-3 sm:flex sm:space-x-2 sm:space-y-0">
      <div class="relative inline-flex items-center justify-start"></div>
    </div>

    <div class="mb-4 content-center pl-3 pr-3">
      <div class="flex w-full items-center justify-start pb-2">
        <span class="flex text-sm font-medium text-gray-500 dark:text-gray-400">
          <div role="status" class="max-w-sm animate-pulse">
            <div class="h-1 w-24 rounded-full bg-gray-200 dark:bg-gray-700"></div>
          </div>
        </span>
      </div>
    </div>
  </div>

  <div class="col-span-1 col-start-1 row-start-4 rounded-lg bg-white p-4 shadow dark:bg-zinc-950 lg:col-span-3 lg:col-start-3 lg:row-start-3 2xl:col-span-2 2xl:col-start-3 2xl:row-start-3">
    <h5 class="mb-4 text-xl font-medium text-gray-500 dark:text-white">Block 4</h5>
    <div class="mb-4 items-center justify-between pl-3 pr-3 sm:flex sm:space-x-2 sm:space-y-0">
      <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">blah</span>
    </div>
  </div>

  <div class="col-span-1 col-start-1 row-start-5 rounded-lg bg-white p-4 shadow dark:bg-zinc-950 lg:col-span-3 lg:col-start-3 lg:row-start-4 2xl:col-span-2 2xl:col-start-3 2xl:row-start-4">
    <h5 class="mb-4 text-xl font-medium text-gray-500 dark:text-white">Block 5</h5>
  </div>

  <div class="col-span-1 col-start-1 row-span-1 row-start-6 rounded-lg bg-white p-4 shadow dark:bg-zinc-950 lg:col-span-3 lg:col-start-3 lg:row-start-5 2xl:col-span-1 2xl:col-start-5 2xl:row-span-3 2xl:row-start-2">
    <div class="mb-8 block w-full">
      <h5 class="text-xl font-medium text-gray-500 dark:text-white">Block 6: Right Column</h5>
    </div>
    <div class="block w-full pt-8"></div>
  </div>

  <div class="col-span-1 row-start-7 rounded-lg bg-white p-4 shadow dark:bg-zinc-950 lg:col-span-5 lg:row-start-6 2xl:row-start-5">Block 7</div>
</div>

which produces the following layout:

enter image description here

I'm struggling to figure out how to get each row to only have a height of it's own content. In the case where Block 2 or Block 6 is taller than Blocks 3, 4, and 5 total, I'd want Block 5 to auto-fill the remaining height to match either Block 2 or 6's overall height (2 will sometimes have longer content and sometimes 6 will be longer).

Currently, my Block 6 has the longest content, and all of the Blocks end up having that same height. When I use "h-fit" on Block 1 (top row) for example, the div height shrinks down to the content like I want, but the distance of the second row is still way down the page like it's height is still matching Block 6's height.

How can I have all Blocks use a height that fits their own content, and have Blocks 2, 5 and 6 "fill" down as needed based whichever of those columns has the longest content?

Upvotes: 3

Views: 2321

Answers (1)

Wongjn
Wongjn

Reputation: 24408

Instead of using 1fr for the sizing of the grid row tracks, consider using auto for most of them apart from the second-to-last grid row. This is so it expands to fill the remaining space available:

<script src="https://cdn.tailwindcss.com/3.3.2"></script>

<div class="grid-rows-[repeat(7,auto)] mt-2 grid grid-cols-1 gap-2 text-white lg:mt-4 lg:grid-cols-5 lg:grid-rows-[repeat(4,auto)_1fr_auto] lg:gap-4 2xl:grid-rows-[repeat(3,auto)_1fr_auto]">
  <div class="col-span-1 rounded-lg bg-white p-4 shadow dark:bg-zinc-950 lg:col-span-5">
    <div class="relative h-auto overflow-hidden rounded-lg"></div>
  </div>

  <div class="col-span-1 col-start-1 row-span-1 row-start-2 rounded-lg bg-white p-4 shadow dark:bg-zinc-950 lg:col-span-2 lg:row-span-4 2xl:col-span-2 2xl:row-span-3">Block 2: Left Column</div>

  <div class="col-span-1 col-start-1 row-start-3 rounded-lg bg-white p-4 shadow dark:bg-zinc-950 lg:col-span-3 lg:col-start-3 lg:row-start-2 2xl:col-span-2 2xl:col-start-3 2xl:row-start-2">
    <h5 class="mb-4 text-xl font-medium text-gray-500 dark:text-white">Block 3</h5>
    <div class="mb-4 items-center justify-between pl-3 pr-3 sm:flex sm:space-x-2 sm:space-y-0">
      <div class="relative inline-flex items-center justify-start"></div>
    </div>

    <div class="mb-4 content-center pl-3 pr-3">
      <div class="flex w-full items-center justify-start pb-2">
        <span class="flex text-sm font-medium text-gray-500 dark:text-gray-400">
          <div role="status" class="max-w-sm animate-pulse">
            <div class="h-1 w-24 rounded-full bg-gray-200 dark:bg-gray-700"></div>
          </div>
        </span>
      </div>
    </div>
  </div>

  <div class="col-span-1 col-start-1 row-start-4 rounded-lg bg-white p-4 shadow dark:bg-zinc-950 lg:col-span-3 lg:col-start-3 lg:row-start-3 2xl:col-span-2 2xl:col-start-3 2xl:row-start-3">
    <h5 class="mb-4 text-xl font-medium text-gray-500 dark:text-white">Block 4</h5>
    <div class="mb-4 items-center justify-between pl-3 pr-3 sm:flex sm:space-x-2 sm:space-y-0">
      <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">blah</span>
    </div>
  </div>

  <div class="col-span-1 col-start-1 row-start-5 rounded-lg bg-white p-4 shadow dark:bg-zinc-950 lg:col-span-3 lg:col-start-3 lg:row-start-4 2xl:col-span-2 2xl:col-start-3 2xl:row-start-4">
    <h5 class="mb-4 text-xl font-medium text-gray-500 dark:text-white">Block 5</h5>
  </div>

  <div class="col-span-1 col-start-1 row-span-1 row-start-6 rounded-lg bg-white p-4 shadow dark:bg-zinc-950 lg:col-span-3 lg:col-start-3 lg:row-start-5 2xl:col-span-1 2xl:col-start-5 2xl:row-span-3 2xl:row-start-2">
    <div class="mb-8 block w-full">
      <h5 class="text-xl font-medium text-gray-500 dark:text-white">Block 6: Right Column</h5>
    </div>
    <div class="block w-full pt-8"></div>
  </div>

  <div class="col-span-1 row-start-7 rounded-lg bg-white p-4 shadow dark:bg-zinc-950 lg:col-span-5 lg:row-start-6 2xl:row-start-5">Block 7</div>
</div>

Upvotes: 2

Related Questions