如何在Tailwind中用Grid实现响应式布局下两个Div并排

需求说明 #

要实现：小屏幕（md尺寸以下）时，每个父列内的两个卡片Div并排显示；md及以上尺寸时，保持卡片上下堆叠的原有布局。

现有代码 #

<div class="mt-1 grid grid-cols-1 font-sm gap-[0.625rem] md:grid-cols-3 md:gap-x-0.75">
    <div>
        <span class=" font-bold">Some text that goes here </span>
          <div class="mt-1 bg-[#f4f4f4] border border-gray-detailBorder py-1.25 px-0.75 items-center text-center w-1/2 md:w-full">
          <p>
            <span class="block font-semibold text-[1.75rem] leading-9 text-blue" id="costs-students-awarded-grants-percent">
              PH%
            </span>
            <span class="mt-0.5 block font-medium text-sm leading-[1.125rem]">
            Text Here
            </span>
          </p>
        </div>
        <div class="bg-[#f4f4f4] border border-gray-detailBorder border-t-0 py-1.25 px-0.75 items-center text-center w-1/2 md:w-full">
          <p>
            <span class="block font-semibold text-[1.75rem] leading-9 text-blue" id="costs-students-awarded-grants-percent">
              PH%
            </span>
            <span class="mt-0.5 block font-medium text-sm leading-[1.125rem]">
            Text Here
          </span>
          </p>
        </div>
    </div>
</div>

问题分析 #

你遗漏了给两个卡片的父容器添加小屏幕下的布局控制：当前两个卡片Div默认是块级元素，即使设置了w-1/2也会自动换行，无法并排。另外，原有的border-t-0样式在小屏幕并排时会导致边框缺失，需要做响应式调整。

修改后的代码 #

<div class="mt-1 grid grid-cols-1 font-sm gap-[0.625rem] md:grid-cols-3 md:gap-x-0.75">
    <div>
        <span class="font-bold">Some text that goes here </span>
        <!-- 给卡片容器添加响应式网格布局 -->
        <div class="mt-1 grid grid-cols-2 gap-0 md:grid-cols-1">
            <div class="bg-[#f4f4f4] border border-gray-detailBorder py-1.25 px-0.75 text-center">
                <p>
                    <span class="block font-semibold text-[1.75rem] leading-9 text-blue" id="costs-students-awarded-grants-percent">
                        PH%
                    </span>
                    <span class="mt-0.5 block font-medium text-sm leading-[1.125rem]">
                        Text Here
                    </span>
                </p>
            </div>
            <div class="bg-[#f4f4f4] border border-gray-detailBorder md:border-t-0 py-1.25 px-0.75 text-center">
                <p>
                    <span class="block font-semibold text-[1.75rem] leading-9 text-blue" id="costs-students-awarded-grants-percent">
                        PH%
                    </span>
                    <span class="mt-0.5 block font-medium text-sm leading-[1.125rem]">
                        Text Here
                    </span>
                </p>
            </div>
        </div>
    </div>
    <!-- 另外两列结构同理复制修改 -->
</div>

关键修改点 #

• 给包裹两个卡片的容器添加grid grid-cols-2 md:grid-cols-1：小屏幕下自动分成两列并排，md及以上恢复单列上下堆叠。
• 移除卡片上的w-1/2 md:w-full：由父容器的网格布局自动分配宽度，无需手动设置。
• 将卡片的border-t-0改为md:border-t-0：仅在md及以上尺寸（上下布局时）取消顶部边框，小屏幕并排时保持完整边框。

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