如何在Tailwind中设置网格列Div为完全相同高度？

问题描述 #

使用Tailwind网格布局配置4个Div组件，桌面视图下第二个Div内容较多，其余Div无法与其保持相同高度，尝试多种方案未解决。

原始代码 #

<div class="mt-3.5 px-[3rem] lg:mt-[4.5rem] mx-auto grid grid-cols-12 gap-x-0.63 gap-y-2.75 py-8 grid-rows-1">
  <div class="col-span-12 lg:col-span-3 order-1 text-lg lg:order-1">
    <div class="w-full rounded-lg border border-gray-detailBorder pb-2 px-1 flex flex-col items-center text-center" id="data-widget-academic-calendar">
      <div class="-mt-1.5 w-3 h-3 rounded-full bg-blue flex items-center justify-center text-2xl leading-6 text-white" aria-hidden="true">
      </div>
      <p class="mt-0.5">
        <span class="block font-medium text-xl leading-6">
          Academic Calendar
        </span>
        <span class="block mt-1 font-semibold text-4xl text-blue">
          PH DATA
        </span>
      </p>
    </div>
  </div>
  <div class="col-span-12 lg:col-span-3 order-4 text-lg lg:order-2">
    <div class="w-full rounded-lg border border-gray-detailBorder pb-2 px-1 flex flex-col items-center text-center" id="data-widget-student-to-faculty-ratio">
      <div class="-mt-1.5 w-3 h-3 rounded-full bg-blue flex items-center justify-center text-2xl leading-6 text-white" aria-hidden="true">
      </div>
      <p class="mt-0.5">
        <span class="block font-medium text-xl leading-6">
          MORE TEXT HERE MORE TEXT HERE
        </span>
        <span class="block mt-1 font-semibold text-4xl text-blue">
          PH DATA
        </span>
      </p>
    </div>
  </div>
  <div class="col-span-6 lg:col-span-3 order-2 text-lg lg:order-3">
    <div class="w-full rounded-lg border border-gray-detailBorder pb-2 px-1 flex flex-col items-center text-center" id="data-widget-majors-offered">
      <div class="-mt-1.5 w-3 h-3 rounded-full bg-blue flex items-center justify-center text-2xl leading-6 text-white" aria-hidden="true">
      </div>
      <p class="mt-0.5">
        <span class="block font-medium text-xl leading-6">
          Majors Offered
        </span>
        <span class="block mt-1 font-semibold text-4xl text-blue">
          PH DATA
        </span>
      </p>
    </div>
  </div>
  <div class="col-span-6 lg:col-span-3 order-3 text-lg lg:order-4">
    <div class="w-full rounded-lg border border-gray-detailBorder pb-2 px-1 flex flex-col items-center text-center" id="data-widget-minors-offered">
      <div class="-mt-1.5 w-3 h-3 rounded-full bg-blue flex items-center justify-center text-2xl leadng-6 text-white" aria-hidden="true">
      </div>
      <p class="mt-0.5">
        <span class="block font-medium text-xl leading-6">
          Minors Offered
        </span>
        <span class="block mt-1 font-semibold text-4xl text-blue">
          PH DATA
        </span>
      </p>
    </div>
  </div>
</div>

解决方法 #

核心思路是让网格子项及其内部卡片容器都占满网格行的高度：

• 给每个网格直接子元素（带col-span-*类的Div）添加h-full类，确保它们继承网格行的完整高度。
• 给每个内部卡片容器（带border类的Div）添加h-full类，让卡片填充父元素的高度。

修改后的关键代码片段 #

以第一个网格子项为例：

<div class="col-span-12 lg:col-span-3 order-1 text-lg lg:order-1 h-full">
  <div class="w-full h-full rounded-lg border border-gray-detailBorder pb-2 px-1 flex flex-col items-center text-center" id="data-widget-academic-calendar">
    <!-- 内部内容保持不变 -->
  </div>
</div>

对其余3个网格子项和对应卡片执行同样的修改，即可实现所有Div高度统一。

原理说明 #

Tailwind网格布局默认会让行高适配内容最高的项，但如果子元素未设置占满行高，其内部卡片只会根据自身内容高度渲染。通过给网格子项和卡片添加h-full，强制它们填充可用高度，从而实现所有卡片高度与最高项一致。

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