时间戳

首页 > 解决方案 > 使用 TrailwindCSS 创建网格

html - 使用 TrailwindCSS 创建网格

问题描述

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

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

谢谢。

标签： htmlcsscss-gridtailwind-css

解决方案

<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>

推荐阅读