Tailwind CSS通过grid类快速创建响应式网格布局，使用grid-cols-*定义列数，gap-x和gap-y分别控制列与行间距，支持sm:、md:、lg:等断点下的响应式配置，实现灵活美观的界面设计。
Tailwind CSS 提供了简洁高效的工具类来实现网格布局，包括设置列间距（column gap）和行间距（row gap）。通过这些预设的响应式类名，你可以快速构建灵活的布局结构，无需编写自定义 CSS。
使用 grid 工具类创建基本网格
Tailwind 基于标准 CSS Grid，使用 grid 和 grid-cols-*n* 类来定义网格容器和列数。
- grid：将元素设为网格容器
- grid-cols-2：创建两列等宽网格
- grid-cols-3：三列布局
- md:grid-cols-4：在中等屏幕及以上显示四列
示例：
<div class="grid grid-cols-3 gap-4"> <div>内容1</div> <div>内容2</div> <div>内容3</div> </div>
设置列间距与行间距
在 Tailwind 中，使用 gap 相关类控制网格项之间的间距。你可单独设置列或行间距，也可统一设置。
立即学习“前端免费学习笔记（深入）”；
- gap-4：同时设置行和列的间距为 1rem（16px）
- col-gap-4 或 gap-x-4：仅设置列间距
- row-gap-6 或 gap-y-6：仅设置行间距
例如，只给列之间留出 8px 间距：
<div class="grid grid-cols-3 col-gap-2 row-gap-4"> <div>项目1</div> <div>项目2</div> <div>项目3</div> </div>
响应式间距控制
Tailwind 支持在不同断点下调整间距。结合响应式前缀如 sm:、md:、lg: 可实现更精细的控制。
比如移动端紧凑、桌面端宽松：
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8"> <div>卡片1</div> <div>卡片2</div> <div>卡片3</div> </div>
基本上就这些。Tailwind 的 grid 工具类让布局变得直观，配合语义化的间距类，能快速实现美观且响应式的界面设计。不复杂但容易忽略的是 gap-x 和 gap-y 的精准控制能力，在实际开发中非常实用。
