使用 Tailwind CSS 创建网格

Posted 2023-03-07

【中文标题】使用 Tailwind CSS 创建网格

【英文标题】：Create Grid Using TrailwindCSS

【发布时间】：2021-03-09 00:13:18

【问题描述】：

所以，我一直在尝试使用这个名为 TrailwindCSS 的 CSS 框架来创建这个网格布局（参见下面的图片附件）；但是，我在控制/更改列宽时遇到问题。更具体地说，我能够改变边和诸如此类的东西，但我从未对结果感到满意，因为要么网格没有完全居中（我使用的是容器），要么因为改变完全弄乱了布局。

如何使用 TrailwindCSS 创建这样的网格布局？

谢谢。

【参考方案1】：

<div className="bg-red-400 p-1 grid grid-cols-4 gap-4">
  /* First row */
  <div className="bg-blue-400 h-32 col-span-3"></div>
  <div className="bg-blue-500 h-32"></div>

  /* Second Row */
  <div className="bg-blue-600 h-32 col-span-4"></div>

  /* Third Row */
  <div className="bg-blue-700 h-32"></div>
  <div className="bg-blue-800 h-32 col-span-3"></div>
</div>