Laravel Blade中如何用Tailwind CSS实现列表数据双列布局？

常见问题排查与解决 #

1. 确保父容器布局类正确应用

最常见的问题是布局类没有加在循环卡片的父容器上，或者被嵌套结构打断。

Grid布局写法（推荐）

修改card-listing.blade.php，将循环包裹在带grid grid-cols-2 gap-x-4 gap-y-6的容器中：

{{-- card-listing.blade.php --}}
<div class="grid grid-cols-2 gap-4">
    @foreach($cards as $card)
        @include('card', ['card' => $card])
    @endforeach
</div>

卡片组件card.blade.php无需额外强制宽度，grid会自动分配列宽：

{{-- card.blade.php --}}
<div class="bg-white rounded-lg shadow-md p-5">
    <h3 class="font-semibold text-lg mb-2">{{ $card->title }}</h3>
    <p class="text-gray-600">{{ $card->description }}</p>
</div>

Flex布局写法

如果用Flex实现，需要给卡片设置自适应宽度：

{{-- card-listing.blade.php --}}
<div class="flex flex-wrap gap-4">
    @foreach($cards as $card)
        @include('card', ['card' => $card])
    @endforeach
</div>

{{-- card.blade.php --}}
<div class="bg-white rounded-lg shadow-md p-5 w-full md:w-[calc(50%-1rem)]">
    {{-- 卡片内容 --}}
</div>

2. 排除干扰因素

• 检查layout.blade.php中的根容器（比如div.container）是否设置了过窄的固定宽度，导致双列无法展开
• 排查是否有自定义CSS或第三方样式覆盖了Tailwind的布局类，比如给卡片添加了width: 100% !important强制单列
• 确认Tailwind配置文件tailwind.config.js中没有修改默认的grid列配置，避免grid-cols-2失效

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