windicss grid grid-gap grid-rows 使用案例

以下是一个使用 Windi CSS 的网格布局的示例：

<div class="grid grid-cols-3 grid-rows-3 grid-gap-4">
  <div class="bg-red-500 text-white text-center py-4">1</div>
  <div class="bg-blue-500 text-white text-center py-4">2</div>
  <div class="bg-green-500 text-white text-center py-4">3</div>
  <div class="bg-yellow-500 text-white text-center py-4">4</div>
  <div class="bg-purple-500 text-white text-center py-4">5</div>
  <div class="bg-indigo-500 text-white text-center py-4">6</div>
  <div class="bg-pink-500 text-white text-center py-4">7</div>
  <div class="bg-gray-500 text-white text-center py-4">8</div>
  <div class="bg-orange-500 text-white text-center py-4">9</div>
</div>

在这个例子中，我们创建了一个3x3的网格布局通过使用 `grid-cols-3` 和 `grid-rows-3` 类。我们还使用了 `grid-gap-4` 类来指定行和列之间的间距。每个单元格都有一个背景颜色和一个白色的文本标签，以便更清楚地显示网格结构。

这里是这个例子的效果图：


你可以在 Windi CSS 的文档中找到更多关于使用网格布局的信息：https://windicss.org/utilities/layout.html#grid-templates