Question 46070 in CSS Question posted in
Some basic documentation can be found here.

Vertical stretch with tailwind – CSS

I’ve created a grid with inside several items.
Each item could have a different height. Inside each item, I’d like to have a text aligned in the bottom, but I’m not able to do that.

This is the code I used:

  <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 my-6 mx-6">

            <a href="{{ route('recipe.show', $recipe) }}" class="rounded-xl bg-white p-3 shadow-lg hover:shadow-xl">
                <div class="relative flex items-end overflow-hidden rounded-xl">
                    <img
                        src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Volleyball_block.jpg/440px-Volleyball_block.jpg" />
                </div>

                <div class="mt-1 p-2">
                    <h2 class="text-slate-700">Il muro può essere eseguito da uno o più giocatori (muro collettivo)</h2>

                    <div class="mt-3 flex items-end justify-between">
                        <p class="group inline-flex">
                            <span class="text-slate-400 text-lg pr-2">
                                <i class="far fa-heart"></i>
                            </span>
                            <span class="text-lg font-bold text-orange-500 mr-3">4</span>
                        </p>
                        <p class="group inline-flex">
                            <span class="text-lg font-bold text-orange-500 pr-2">4</span>
                            <span class="text-slate-400 text-lg">
                                <i class="far fa-heart"></i>
                            </span>
                        </p>
                    </div>
                </div>
            </a>

            <a href="{{ route('recipe.show', $recipe) }}" class="rounded-xl bg-white p-3 shadow-lg hover:shadow-xl">
                <div class="relative flex items-end overflow-hidden rounded-xl">
                    <img
                        src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Volleyball_block.jpg/440px-Volleyball_block.jpg" />
                </div>

                <div class="mt-1 p-2">
                    <h2 class="text-slate-700">Il muro</h2>

                    <div class="mt-3 flex items-end justify-between">
                        <p class="group inline-flex">
                            <span class="text-slate-400 text-lg pr-2">
                                <i class="far fa-heart"></i>
                            </span>
                            <span class="text-lg font-bold text-orange-500 mr-3">4</span>
                        </p>
                        <p class="group inline-flex">
                            <span class="text-lg font-bold text-orange-500 pr-2">4</span>
                            <span class="text-slate-400 text-lg">
                                <i class="far fa-heart"></i>
                            </span>
                        </p>
                    </div>
                </div>
            </a>

            <a href="{{ route('recipe.show', $recipe) }}" class="rounded-xl bg-white p-3 shadow-lg hover:shadow-xl">
                <div class="relative flex items-end overflow-hidden rounded-xl">
                    <img
                        src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Volleyball_block.jpg/440px-Volleyball_block.jpg" />
                </div>

                <div class="mt-1 p-2">
                    <h2 class="text-slate-700">Il muro può essere eseguito da uno o più giocatori. Il muro può essere eseguito da uno o più giocatori.</h2>

                    <div class="mt-3 flex items-end justify-between">
                        <p class="group inline-flex">
                            <span class="text-slate-400 text-lg pr-2">
                                <i class="far fa-heart"></i>
                            </span>
                            <span class="text-lg font-bold text-orange-500 mr-3">4</span>
                        </p>
                        <p class="group inline-flex">
                            <span class="text-lg font-bold text-orange-500 pr-2">4</span>
                            <span class="text-slate-400 text-lg">
                                <i class="far fa-heart"></i>
                            </span>
                        </p>
                    </div>
                </div>
            </a>



        </div>

and this is result:
result

I’d like to have in each item, the last row aligned in the bottom.

could you tell me what I’m wrong?
thanks

Tags:

3

Answers


  1. 0

    I don’t know if this could help, but can you try adding a css?
    Add like below.

    .group{
position: absolute;
bottom: 3%; //or what height from bottom will you prefer.
}
    Login or Signup to reply.
  2. 0

    You could use grid on your cards. Give the card two rows: one on top for the image that is only as big as its content and the remainder is the text portion of the card.

    <a href="{{ route('recipe.show', $recipe) }}" class="grid grid-rows-[min-content_1fr] rounded-xl bg-white p-3 shadow-lg hover:shadow-xl">

    Then you can set the text portion can be set to flex in the column direction. Using justify-content: space-between (justify-between Tailwind class) will push the "likes" to the bottom of the card:

    <div class="mt-1 p-2 flex flex-col justify-between">...</div>

    Optionally, you can make all of the images be the same size using aspect-ratio and object-fit:

    <div class="overflow-hidden rounded-xl">
  <img src="https://picsum.photos/id/237/600" class="aspect-[4/3] h-full w-full object-cover" />
</div>

    Working Snippet

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha512-q3eWabyZPc1XTCmF+8/LuE1ozpg5xxn7iO89yfSOd5/oKvyqLngoNGsx8jq92Y8eXJ/IRxQbEC+FGSYxtk2oiw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>


<div class="grid grid-cols-1 gap-6 m-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
  <a href="{{ route('recipe.show', $recipe) }}" class="grid grid-rows-[min-content_1fr] rounded-xl bg-white p-3 shadow-lg hover:shadow-xl">
    <div class="overflow-hidden rounded-xl">
      <img src="https://picsum.photos/id/237/600" class="aspect-[4/3] h-full w-full object-cover" />
    </div>
    <div class="mt-1 p-2 flex flex-col justify-between">
      <h2 class="text-slate-700">Il muro può essere eseguito da uno o più giocatori (muro collettivo)</h2>
      <div class="mt-3 flex items-end justify-between">
        <p class="group inline-flex">
          <span class="text-slate-400 text-lg pr-2">
            <i class="far fa-heart"></i>
          </span>
          <span class="text-lg font-bold text-orange-500 mr-3">400</span>
        </p>
        <p class="group inline-flex">
          <span class="text-lg font-bold text-orange-500 pr-2">54</span>
          <span class="text-slate-400 text-lg">
            <i class="fa fa-retweet" aria-hidden="true"></i>
          </span>
        </p>
      </div>
    </div>
  </a>
  <a href="{{ route('recipe.show', $recipe) }}" class="grid grid-rows-[min-content_1fr] rounded-xl bg-white p-3 shadow-lg hover:shadow-xl">
    <div class="overflow-hidden rounded-xl">
      <img src="https://picsum.photos/id/128/600" class="aspect-[4/3] h-full w-full" />
    </div>
    <div class="mt-1 p-2 flex flex-col justify-between">
      <h2 class="text-slate-700">Il muro</h2>
      <div class="mt-3 flex items-end justify-between">
        <p class="group inline-flex">
          <span class="text-slate-400 text-lg pr-2">
            <i class="far fa-heart"></i>
          </span>
          <span class="text-lg font-bold text-orange-500 mr-3">92</span>
        </p>
        <p class="group inline-flex">
          <span class="text-lg font-bold text-orange-500 pr-2">12</span>
          <span class="text-slate-400 text-lg">
            <i class="fa fa-retweet" aria-hidden="true"></i>
          </span>
        </p>
      </div>
    </div>
  </a>
  <a href="{{ route('recipe.show', $recipe) }}" class="grid grid-rows-[min-content_1fr] rounded-xl bg-white p-3 shadow-lg hover:shadow-xl">
    <div class="overflow-hidden rounded-xl">
      <img src="https://picsum.photos/id/6/600" class="aspect-[4/3] h-full w-full" />
    </div>
    <div class="mt-1 p-2 flex flex-col justify-between">
      <h2 class="text-slate-700">Il muro può essere eseguito da uno o più giocatori. Il muro può essere eseguito da uno o più giocatori.</h2>
      <div class="mt-3 flex items-end justify-between">
        <p class="group inline-flex">
          <span class="text-slate-400 text-lg pr-2">
            <i class="far fa-heart"></i>
          </span>
          <span class="text-lg font-bold text-orange-500 mr-3">2.7K</span>
        </p>
        <p class="group inline-flex">
          <span class="text-lg font-bold text-orange-500 pr-2">4</span>
          <span class="text-slate-400 text-lg">
            <i class="fa fa-retweet" aria-hidden="true"></i>
          </span>
        </p>
      </div>
    </div>
  </a>
</div>
    Login or Signup to reply.
  3. 0

    You need to play with flex flex-1 accross element.

    Tailwind-play

    Structure to follow

    <a class = "flex flex-col"
  <img class=""/>
  <div class="flex-1 flex flex-col">
     <h1 class = "flex-1">
     <div>
  </div>
</a>

    Output:
    enter image description here

    <div class="my-6 mx-6 grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
  <a href="{{ route('recipe.show', $recipe) }}" class="flex flex-col rounded-xl bg-white p-3 shadow-lg hover:shadow-xl">
    <div class="rounded-xl">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Volleyball_block.jpg/440px-Volleyball_block.jpg" />
    </div>

    <div class="mt-1 flex flex-1 flex-col p-2">
      <h2 class="flex-1 text-slate-700">Il muro può essere eseguito da uno o più giocatori (muro collettivo) l muro può essere eseguito da uno o più giocatori (muro collettivo)l muro può essere eseguito da uno o più giocatori (muro collettivo)l muro può essere eseguito da uno o più giocatori (muro collettivo)</h2>

      <div class="mt-3 flex items-end justify-between">
        <p class="group inline-flex">
          <span class="pr-2 text-lg text-slate-400">
            <i class="far fa-heart"></i>
          </span>
          <span class="mr-3 text-lg font-bold text-orange-500">4</span>
        </p>
        <p class="group inline-flex">
          <span class="pr-2 text-lg font-bold text-orange-500">4</span>
          <span class="text-lg text-slate-400">
            <i class="far fa-heart"></i>
          </span>
        </p>
      </div>
    </div>
  </a>

  <a href="{{ route('recipe.show', $recipe) }}" class="flex flex-col rounded-xl bg-white p-3 shadow-lg hover:shadow-xl">
    <div class="relative flex items-end overflow-hidden rounded-xl">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Volleyball_block.jpg/440px-Volleyball_block.jpg" />
    </div>

    <div class="h-f mt-1 flex flex-1 flex-col p-2">
      <h2 class="flex-1 text-slate-700">Il muro</h2>

      <div class="mt-3 flex items-end justify-between">
        <p class="group inline-flex">
          <span class="pr-2 text-lg text-slate-400">
            <i class="far fa-heart"></i>
          </span>
          <span class="mr-3 text-lg font-bold text-orange-500">4</span>
        </p>
        <p class="group inline-flex">
          <span class="pr-2 text-lg font-bold text-orange-500">4</span>
          <span class="text-lg text-slate-400">
            <i class="far fa-heart"></i>
          </span>
        </p>
      </div>
    </div>
  </a>

  <a href="{{ route('recipe.show', $recipe) }}" class="flex flex-col rounded-xl bg-white p-3 shadow-lg hover:shadow-xl">
    <div class="relative flex items-end overflow-hidden rounded-xl">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Volleyball_block.jpg/440px-Volleyball_block.jpg" />
    </div>

    <div class="mt-1 flex flex-1 flex-col p-2">
      <h2 class="flex-1 text-slate-700">Il muro può essere eseguito da uno o più giocatori. Il muro può essere eseguito da uno o più giocatori.</h2>

      <div class="mt-3 flex items-end justify-between">
        <p class="group inline-flex">
          <span class="pr-2 text-lg text-slate-400">
            <i class="far fa-heart"></i>
          </span>
          <span class="mr-3 text-lg font-bold text-orange-500">4</span>
        </p>
        <p class="group inline-flex">
          <span class="pr-2 text-lg font-bold text-orange-500">4</span>
          <span class="text-lg text-slate-400">
            <i class="far fa-heart"></i>
          </span>
        </p>
      </div>
    </div>
  </a>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search