Tailwind图片画廊垂直排列问题：如何改为水平网格布局？

你的问题出在当前使用的columns-3多列布局未正确适配图片样式，导致图片垂直排列。换成Tailwind的Grid布局就能实现你想要的水平网格效果，以下是修改后的Blade代码：

<div class="container lg:px-32 px-4 py-8 mx-auto">
    <div class="w-full max-h-5xl p-5 pb-10 mx-auto mb-10 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">   
        @foreach($collection as $images) 
            <img 
                src="{{ asset('storage/images/' . $b . '/' . $images->image_name) }}" 
                alt="画廊图片" 
                draggable="false" 
                class="rounded-md w-full h-64 object-cover"
            >
        @endforeach
    </div>
</div>

修改说明： #

• 替换columns-3为grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3，实现响应式网格布局：移动端1列、平板2列、桌面端3列
• 用gap-4替代gap-2 space-y-2，统一控制网格间距，布局更规整
• 给图片添加w-full h-64 object-cover：
  • w-full让图片填充网格单元格宽度
  • h-64固定图片高度（可根据需求调整为h-48、h-72等）
  • object-cover保证图片按比例填充，避免拉伸变形
• 移除冗余的items-center justify-center（Grid布局会自动处理排列）和无效的h-md类（Tailwind无默认该类）

控制器代码无需修改，保持原样即可。

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