Laravel中如何消除TailwindCSS网格行的自动高度问题

你的问题核心是循环时把单个属性拆成了两个独立的网格项，导致Grid布局按顺序填充时，高项会挤占下方位置，出现空白。下面是两种直接可行的解决方案：

方案一：调整结构，将单个属性封装为网格列项 #

把每个属性的标题和内容包裹在同一个容器里，作为Grid的单个子元素，这样每行只会排列两个完整的属性卡片，不会出现拆分错位：

<div class="p-4 grid grid-cols-2 gap-6">
    @foreach($attributes as $attribute)
        <!-- 单个属性作为完整的网格列项 -->
        <div class="flex flex-col">
            <div class="bg-green-800 p-2">
                <p class="text-lg font-bold text-center text-white">
                    {{ $attribute->name }} <!-- 替换为实际属性标题字段 -->
                </p>
            </div>
            <div class="bg-white flex-grow">
                {{-- 填入实际表格内容 --}}
                对应{{ $attribute->name }}的表格内容
            </div>
        </div>
    @endforeach
</div>

• flex flex-col让每个卡片内部垂直排列
• flex-grow确保内容区域自动填充卡片剩余空间，保持结构统一

方案二：用Flex布局替代Grid #

如果更习惯Flex的逻辑，也可以用Flex实现相同效果：

<div class="p-4 flex flex-wrap gap-6">
    @foreach($attributes as $attribute)
        <div class="w-[calc(50%-1.5rem)] flex flex-col">
            <div class="bg-green-800 p-2">
                <p class="text-lg font-bold text-center text-white">
                    {{ $attribute->name }}
                </p>
            </div>
            <div class="bg-white flex-grow">
                对应{{ $attribute->name }}的表格内容
            </div>
        </div>
    @endforeach
</div>

• flex-wrap让元素自动换行
• w-[calc(50%-1.5rem)]是因为gap-6对应1.5rem，减去一半的gap宽度，保证每行正好容纳两个卡片

这两种方案都能让每个属性卡片完整排列，下一行的卡片会紧接上一行的底部，不会出现多余空白。

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