cssgridtailwind-css
Vertical stretch with tailwind
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
Solution
You need to play with flex flex-1 accross element.
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:
<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>
- Simple frame by frame video decoder library
- GCC no longer implements <varargs.h>
- Contents of IO buffer unknown == unsafe?
- Avoiding strcpy overflow destination warning
- Sort program not working, not sure why
- Fast & accurate atan/arctan approximation algorithm
- What's the difference between strtok_r and strtok_s in C?
- How memory address for pointer to arrays is same as an element in 2D array?
- Which is the best way to suppress "unused variable" warning
- How to use ellipsis in c's case statement?
- How can I exclude non-numeric keys? CS50 Caesar Pset2
- Fast ceiling of an integer division in C / C++
- Is there an invalid pthread_t id?
- How to Implement Universal Setter/Getter Functions for Interrupt-Driven Variables in Embedded C?
- How does SIMD (avx) processing work? for example, if I want 10 32 bit floats how do i fit in a 256 bit avx vector?
- FDCAN problems on STM32G4
- How does the call macro enable mutual recursion between functions f and g in this Hanoi Tower implementation?
- Running test on Rocket core CPU - global variable initialized to 0 is unsuccessful, output wrong value instead
- Interacting with C arrays without knowing the size
- Combination of two strings
- carriage return by fgets
- How to use special characters in C?
- Why does 1.0/100.0 == 0.1/10.0 give True?
- Is it correct to compare pointers in C?
- Force free() to return malloc memory back to OS
- How can I print to standard error in C with 'printf'?
- What is the standard behavior of fread in C on Windows?
- How is strtok removing lines it shouldn't have access to?
- Using array as smart point in C
- Assigning string to malloced 2d char array not working as intended