Search code examples
cssgridtailwind-css

CSS GRID adjust all items inside a grid column to match the height of content of other grid item column

enter image description here

The expectation is to get a straight divider line. Even if the content inside rows 3,1,5 increases, then all the column height should adjust to max height of the row in a column demo: tailwind playground link

Solution

  • You could consider using a row subgrid tracks. This enables the child grids to use the row tracks of the parent track. This ensures the row heights are shared across all the sibling grids.

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

<div class="p-8">
  <div class="grid auto-cols-auto grid-cols-4 grid-rows-[repeat(9,auto)]">
    <div class="grid auto-cols-auto grid-cols-1 divide-y grid-rows-subgrid row-span-full" id="a1">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
    <div class="grid auto-cols-auto grid-cols-1 divide-y grid-rows-subgrid row-span-full" id="a2">
      <div>1</div>
      <div>2</div>
      <div>3 Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
    <div class="grid auto-cols-auto grid-cols-1 divide-y grid-rows-subgrid row-span-full" id="a3">
      <div>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
    <div class="grid grid-cols-1 divide-y grid-rows-subgrid row-span-full" id="a4">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5 Lorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>
</div>