1. 启用 Grid

<div className="grid">
  <!-- 子元素 -->
</div>

2. 定义列数

<div className="grid grid-cols-3">
  <!-- 子元素 -->
</div>

3. 列和行的定义

• grid-cols-{n}：定义列数，例如 grid-cols-2、grid-cols-4。
• grid-rows-{n}：定义行数。

4. 列和行的间隔

<div className="grid gap-4">
  <!-- 子元素 -->
</div>

5. 行和列的大小

<div className="grid grid-cols-3 grid-rows-2">
  <div className="col-span-2">占据两列</div>
  <div className="row-span-2">占据两行</div>
</div>

6. 位置和对齐

• items-start、items-center、items-end：在交叉轴上对齐。
• justify-start、justify-center、justify-end：在主轴上对齐。

综合示例

<div className="grid grid-cols-3 gap-4">
  <div className="bg-red-500">项1</div>
  <div className="bg-green-500">项2</div>
  <div className="bg-blue-500">项3</div>
  <div className="bg-yellow-500 col-span-2">占据两列</div>
</div>

---