如何用Tailwind CSS实现Grid子项底部元素对齐？

我创建了一个包含多个子项的Grid布局，各子项高度不同。我希望每个子项内的最后一行元素（带爱心的操作栏）对齐到底部，但没能实现。

当前代码如下：

<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>

当前效果显示各子项的底部操作栏位置不一致，未对齐到容器底部。

问题核心是Grid子项（<a>标签）未设置垂直flex布局，无法让底部元素自动对齐到底部。修改步骤如下：

1. 给每个<a>标签添加flex flex-col类，将其转为垂直方向的flex容器；
2. 把包裹标题和操作栏的<div class="mt-1 p-2">改为mt-1 p-2 flex-1 flex flex-col，让该容器占满<a>标签的剩余垂直空间；
3. 给底部操作栏的<div>替换mt-3为mt-auto，利用flex特性自动将元素推至容器底部。

修改后的核心代码片段：

<a href="{{ route('recipe.show', $recipe) }}" class="rounded-xl bg-white p-3 shadow-lg hover:shadow-xl flex flex-col">
    <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 flex-1 flex flex-col">
        <h2 class="text-slate-700">Il muro può essere eseguito da uno o più giocatori (muro collettivo)</h2>
        <div class="mt-auto flex items-end justify-between">
            <!-- 操作栏内容保持不变 -->
        </div>
    </div>
</a>

原理说明：

• flex flex-col让<a>内部元素垂直排列，且Grid布局会默认拉伸所有子项高度一致；
• flex-1确保中间内容容器占满剩余垂直空间，为底部元素“让位”；
• mt-auto借助flex布局的自动分配特性，让操作栏无论上方标题高度如何，都能固定在容器底部。

内容的提问来源于stack exchange，提问作者Alex