Tailwind CSS中lg屏幕尺寸下嵌套网格高度异常问题排查

问题背景 #

项目使用Tailwind CSS构建布局，为区分元素添加了背景色。HTML代码如下：

<div class="wraper mt-5 grid gap-4 grid-cols-1 lg:grid-cols-2">
    <div class="grid gap-4 w-full grid-cols-1 xs:grid-cols-2 my-4">
        <div class="relative flex justify-center w-full h-[30rem] bg-yellow-400"></div>
        <div class="relative flex justify-center w-full h-[30rem] bg-violet-500"></div>
        <div class="adv relative w-full xs:col-span-2 h-[10rem] bg-gray-700"></div>
    </div>
    <div class="grid gap-4 w-full grid-cols-2 lg:mt-4">
        <div class="w-full h-10 bg-red-600"></div>
        <div class="w-full h-10 bg-green-500"></div>
        <div class="test bg-orange-800 w-full h-20 col-span-2"></div>
    </div>
</div>

自定义断点配置：

screens: {
  'xs': '428px',
  'sm': '576px',
  'md': '768px',
  'lg': '992px',
  'xl': '1200px',
  'xxl': '1400px'
},

仅在LG屏幕尺寸下，橙色元素与红、绿色元素间出现异常大间距，小屏显示正常。

问题根源 #

间距异常由两个核心问题导致：

1. Grid默认拉伸对齐：父容器wraper使用Grid布局，默认align-items: stretch。在LG断点下左右子Grid并排时，右侧子Grid会被强制拉伸到与左侧等高的高度（左侧包含两个30rem高的元素，高度远大于右侧）。右侧Grid内部元素为固定高度，因此元素集中在容器顶部，下方留出大量空白，视觉上表现为橙色元素与红绿元素间距变大。
2. Margin与Gap叠加：左侧子Grid带有my-4（上下margin各1rem），右侧子Grid在LG断点下额外添加lg:mt-4（顶部margin1rem），再加上父Grid的gap-4（子项间距1rem），三者叠加后，LG断点下左右子Grid之间的总间距达到3rem，远大于小屏时的1rem（仅左侧mb-4）。

修复方案 #

根据需求选择以下任意一种方案：

方案1：取消额外Margin，让Grid子项高度自适应 #

移除右侧Grid的lg:mt-4类，避免Margin与Gap叠加；给父Grid添加items-start类，让子Grid高度由自身内容决定，不再强制拉伸：

<div class="wraper mt-5 grid gap-4 grid-cols-1 lg:grid-cols-2 items-start">
    <div class="grid gap-4 w-full grid-cols-1 xs:grid-cols-2 my-4">
        <!-- 左侧内容保持不变 -->
    </div>
    <div class="grid gap-4 w-full grid-cols-2">
        <!-- 右侧内容保持不变 -->
    </div>
</div>

方案2：统一间距规则，使用Gap替代Margin #

如果需要右侧Grid在LG下有顶部Margin，同时保证全端间距一致，可移除左侧Grid的my-4，改用父Grid的gap-4控制子项间距，给右侧Grid添加全局mt-4（而非仅LG断点）：

<div class="wraper mt-5 grid gap-4 grid-cols-1 lg:grid-cols-2">
    <div class="grid gap-4 w-full grid-cols-1 xs:grid-cols-2">
        <!-- 左侧内容保持不变 -->
    </div>
    <div class="grid gap-4 w-full grid-cols-2 mt-4">
        <!-- 右侧内容保持不变 -->
    </div>
</div>

额外提示 #

• Tailwind Grid的gap属性专门用于控制子项间距，无需额外给子项添加Margin，避免叠加导致的间距异常；
• items-start属性适合左右内容高度差异较大的布局场景，可避免不必要的拉伸。

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