Search code examples
gridtailwind-css

Tailwind Grid - different rows have different line height

When I use grid in tailwind

<div class="grid grid-cols-9 grid-rows-3 my-3 leading-4">
    <div class="col-start-1 col-span-5 row-start-1 flex">
        <p class="flex-shrink-0">Company Name：</p>
        <p>ABCD EFGGGG HIJK LMNOPQRS TUVV WXYZZZ</p>
    </div>
    <div class="col-start-6 col-span-full row-start-1">
        Date：2022/05/16
    </div>
    <div class="col-start-1 col-span-5 row-start-2 flex">
        <p class="flex-shrink-0">Contact：</p>
        <p class="break-all">Wenston Black</p>
    </div>
    <div class="col-start-6 col-span-full row-start-2">
        Tel：XXXXXXXXXXX
    </div>
    <div class="col-start-1 col-span-5 row-start-3">
        email：XXXXXXXX@gmail.com
    </div>
    <div class="col-start-6 col-span-full row-start-3">
        Fax：xxxxxxxxxxxx
    </div>
</div>

The Company Name with short value is OK, but with long value it makes every row height grow up.

  • short Company Name enter image description here

  • long Company Name enter image description here

I need other rows keep height dense. How can I do?

I know I can do this with flex, but I really need to use grid here.

Solution

  • grid-rows-3 will apply the property grid-template-rows: repeat(3, minmax(0, 1fr));, so the rows will always have the same height.

    If a grid item is positioned into a row that is not explicitly sized by grid-template-rows, implicit grid tracks are created to hold it with an "auto" height. So just remove grid-rows-3 from the first div:

    <div class="grid grid-cols-9 my-3 leading-4">
    <div class="col-start-1 col-span-5 row-start-1 flex">
        <p class="flex-shrink-0">Company Name：</p>
        <p>ABCD EFGGGG HIJK LMNOPQRS TUVV WXYZZZ ABCD EFGGGG HIJK LMNOPQRS TUVV WXYZZZ</p>
    </div>
    <div class="col-start-6 col-span-full row-start-1">
        Date：2022/05/16
    </div>
    <div class="col-start-1 col-span-5 row-start-2 flex">
        <p class="flex-shrink-0">Contact：</p>
        <p class="break-all">Wenston Black</p>
    </div>
    <div class="col-start-6 col-span-full row-start-2">
        Tel：XXXXXXXXXXX
    </div>
    <div class="col-start-1 col-span-5 row-start-3">
        email：XXXXXXXX@gmail.com
    </div>
    <div class="col-start-6 col-span-full row-start-3">
        Fax：xxxxxxxxxxxx
    </div>
</div>

    See it in playground.