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>
- CSS Flexbox Gap - gap value affecting width calculation
- How to use "repeat()" css function combined with Angular ngStyle directive?
- CSS Modules and CSS keyframe animations
- Difference between Localhost and opening html file
- Use of display:none but still keep the space used
- Referencing another element in CSS / doing math in CSS
- Issue with animation, skips half of it's way
- Vertically align text within input field of fixed-height without display: table or padding?
- hover over image effect: shadow
- How can I fix nested gird layout?
- How to put some space between elements when bootstrap grid collapse?
- How can I make Bootstrap 4 columns all the same height?
- Javascript live typing animation that handles HTML tags
- applying the same selectors on sibling have a slightly different behaviour
- How to overwrite css style
- How to create checkbox inside dropdown?
- Add image or text onto all JSP pages through Struts or CSS
- Render spans inside pre tag (in the HTML, not displayed as text to the user)
- What to use in place of ::ng-deep
- Select specific element before other element
- How to change font for the CodeMirror editor
- Make circle image according to screen size with CSS
- Div taking all horizontal space
- -webkit-backdrop-filter not working on Safari
- Nested Flexbox for navbar
- How to create a Numbering marker in CSS?
- Put text under drag-n-drop area
- Remove the space between 2 elements under each other using flex
- Bootstrap 5 tooltip placement top issue when page has a scroll
- How to dim an image keeping transparency untouched with CSS or JS?