使用 Tailwind CSS 创建网格答案

【问题标题】：Create Grid Using TrailwindCSS使用 Tailwind CSS 创建网格
【发布时间】：2021-03-09 00:13:18
【问题描述】：

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

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

谢谢。

【问题讨论】：

标签： html css css-grid tailwind-css

【解决方案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>

【讨论】：