Tailwind CSS 的 Grid 布局类有哪些，如何创建常见的 Grid 布局？

Tailwind CSS 的 Grid 布局通过 grid 相关类实现，让开发者能够轻松创建二维网格布局。

基础 Grid 类：

• grid：启用 Grid 布局
• inline-grid：启用内联 Grid 布局
• grid-cols-1：1 列网格
• grid-cols-2：2 列网格
• grid-cols-3：3 列网格
• grid-cols-4：4 列网格
• grid-cols-5：5 列网格
• grid-cols-6：6 列网格
• grid-cols-7：7 列网格
• grid-cols-8：8 列网格
• grid-cols-9：9 列网格
• grid-cols-10：10 列网格
• grid-cols-11：11 列网格
• grid-cols-12：12 列网格
• grid-cols-none：不指定列数

行设置：

• grid-rows-1：1 行网格
• grid-rows-2：2 行网格
• grid-rows-3：3 行网格
• grid-rows-4：4 行网格
• grid-rows-5：5 行网格
• grid-rows-6：6 行网格
• grid-rows-none：不指定行数

间距控制：

• gap-0：无间距
• gap-1：0.25rem（4px）
• gap-2：0.5rem（8px）
• gap-3：0.75rem（12px）
• gap-4：1rem（16px）
• gap-5：1.25rem（20px）
• gap-6：1.5rem（24px）
• gap-8：2rem（32px）
• gap-x-*：水平间距
• gap-y-*：垂直间距

对齐方式：

• justify-items-start：水平起始对齐
• justify-items-end：水平结束对齐
• justify-items-center：水平居中对齐
• justify-items-stretch：水平拉伸（默认）
• items-start：垂直起始对齐
• items-end：垂直结束对齐
• items-center：垂直居中对齐
• items-stretch：垂直拉伸（默认）
• justify-start：网格容器水平起始对齐
• justify-end：网格容器水平结束对齐
• justify-center：网格容器水平居中对齐
• justify-between：网格容器水平两端对齐
• justify-around：网格容器水平周围间隔相等
• content-start：多行垂直起始对齐
• content-end：多行垂直结束对齐
• content-center：多行垂直居中对齐
• content-between：多行垂直两端对齐
• content-around：多行垂直周围间隔相等

跨列跨行：

• col-span-1：跨越 1 列
• col-span-2：跨越 2 列
• col-span-3：跨越 3 列- col-span-full：跨越所有列
• col-start-1：从第 1 列开始
• col-end-2：到第 2 列结束
• row-span-1：跨越 1 行
• row-span-2：跨越 2 行
• row-span-full：跨越所有行
• row-start-1：从第 1 行开始
• row-end-2：到第 2 行结束

常用布局示例：

• 基本网格：

  html
  <div class="grid grid-cols-3 gap-4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
  </div>

• 响应式网格：

  html
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </div>

• 卡片布局：

  html
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
    <div class="card">Card 4</div>
  </div>

• 复杂布局：

  html
  <div class="grid grid-cols-4 grid-rows-3 gap-4">
    <div class="col-span-2 row-span-2">Header</div>
    <div>Sidebar</div>
    <div class="col-span-3 row-span-2">Content</div>
    <div>Footer</div>
  </div>

• 自动填充：

  html
  <div class="grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] gap-4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </div>

最佳实践：

• 使用语义化的 HTML 结构
• 结合响应式前缀创建自适应网格
• 合理使用间距控制布局
• 使用跨列跨行创建复杂布局
• 测试不同屏幕尺寸的显示效果