CSS Grid fill containers with same height, buttons on bottom-CodePudding

I have following sample, written in tailwind css:

https://play.tailwindcss.com/f9iOK1e0oM

I want to have my control buttons on the bottom if the grid containers, however, they have different content sizes for the blue "tag" boxes, so the grid gets increased in height by some containers. however, as I am working with grid, all boxes are getting this height then. this is ok. But my control buttons should be always on the bottom of the containers, so that "Enabled" and "Delete" should not be so far away from bottom for the second container.

How to achieve this?

CodePudding user response：

You need to add flex flex-col to the li element. And grow to the first child div and grow-0 max-h-max to the second child div.

<li >
    <div >
      <div >
        <h3 >243rfh83294d-23r8fj2n48r-24fi43bf</h3>
        <span > running </span>
      </div>
      <p >Interval: <span >1234</span></p>
      <p >Next run: <span >1234</span></p>
      <p >
        <span >test 1</span>
      </p>
    </div>
    <div>
      <div >
        <div >
          <button >
            <span >Enabled</span>
          </button>
        </div>
        <div >
          <button >
            <span >Delete</span>
          </button>
        </div>
      </div>
    </div>
  </li>

https://play.tailwindcss.com/ilTMM5glku

I have done this only for the second card, but you should do it for all cards. So that when the content changes, the button row will always stick to the bottom and keep the same height in all cards.

Hope this helps.