windicss grid grid-gap 使用案例

以下是一个使用 Windi CSS 的 Grid 和 Grid Gap 的简单示例：

<div class="grid grid-cols-3 grid-gap-4">
  <div class="bg-gray-100 p-4">1</div>
  <div class="bg-gray-200 p-4">2</div>
  <div class="bg-gray-300 p-4">3</div>
  <div class="bg-gray-400 p-4">4</div>
  <div class="bg-gray-500 p-4">5</div>
  <div class="bg-gray-600 p-4">6</div>
</div>

在上面的示例中，我们使用 `grid-cols-3` 类指定网格列数为 3，使用 `grid-gap-4` 类指定网格间距为 4。然后，我们在 `div` 元素中使用 Windi CSS 的背景颜色和内边距类来创建网格项。

该示例将创建一个包含 6 个网格项的 3 列网格，每个网格项之间有 4 像素的间距。