Tailwind css: align element bottom of parent div

0
votes

enter image description here

<div class="grid grid-cols-5 gap-4">
  <div class="overflow-hidden border hover:rounded-lg hover:shadow-lg justify-evenly">
                <div class="flex px-3 pt-1 justify-end">
                  <a class="underline italic" href="desc.html" title="Description">More</a>
                </div>
                <a class="cursor-pointer" href="www.www.com">
                  <img src="img/img.JPG" />
                </a>
                <div class="flex w-full justify-evenly mt-1 mb-4">
                  <a href="www.www.com class="bg-green-700 hover:bg-green-800 text-white font-bold py-1 px-4 rounded">
                    Button
                  </a>
                </div>
              </div>
  <div class="overflow-hidden border hover:rounded-lg hover:shadow-lg justify-evenly">

  </div>
  ...

</div>

I have grid with multiple grid cells. Each cell contains image. Under image there is a button. Currently button is placed just under the image. However, heights of images are different. So those buttons are not aligned. I wonder how to put these buttons at the bottom of each cell??

I tried to add align-bottom on button wrapper, but it doesn't help.

2
htmlcsstailwind-css

2 Answers

1
votes

Just need to play around with h-# flex flex-col justify-*. See a working demo.

<div class="grid grid-cols-3">
  <div class="col-span-1 h-96 flex flex-col justify-between">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="h-full bg-cover bg-center" />
    <button class="w-24 px-4 py-2 bg-gray-200 rounded-lg">Button</button>
  </div>
  <div class="col-span-1 h-96 flex flex-col justify-between">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" class="h-3/5 bg-cover bg-center" />
    <button class="w-24 px-4 py-2 bg-gray-200 rounded-lg">Button</button>
  </div>
  <div class="col-span-1 h-96 flex flex-col justify-between">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/baboon.png" class="h-3/4 bg-cover bg-center" />
    <button class="w-24 px-4 py-2 bg-gray-200 rounded-lg">Button</button>
  </div>
</div>
0
votes

I see the following changes:

  • The card div should be a flex column, with the classes flex and flex-col and justify-between. This one each child element will be vertically positioned so there is the same space between them

  • Wrap the Img and the more link in a div, this way the space between the img and the more won't be that large