Cutest UI 样式框架

一个简洁、美观的CSS样式框架，提供了丰富的UI组件和响应式设计。

网格布局

灵活的网格系统，用于创建响应式页面布局。

网格项 1
网格项 2
网格项 3
网格项 4
网格项 5
网格项 6

网格组件用法指南

基本用法

网格系统是一种二维布局工具，可以将页面内容分割成规则的行和列。基础HTML结构如下：

<div class="grid grid-2 grid-gap-4">
  <div>网格项 1</div>
  <div>网格项 2</div>
  <div>网格项 3</div>
  <div>网格项 4</div>
</div>

组件类型

  • .grid: 基础网格布局，在桌面端默认为3:1的两列布局
  • .tips-grid: 提示卡片专用网格，在桌面端为两列布局
  • .responsive-grid: 响应式网格，在不同屏幕尺寸下自动调整列数

网格列数变体

通过添加以下类可以控制网格的列数：

.grid-1 .grid-2 .grid-3 .grid-4 .grid-5 .grid-6

网格间距变体

通过添加以下类可以控制网格项之间的间距：

.grid-gap-1 .grid-gap-2 .grid-gap-3 .grid-gap-4 .grid-gap-5 .grid-gap-6

网格对齐变体

通过添加以下类可以控制网格项的对齐方式：

垂直对齐：
.grid-align-start, .grid-align-center, .grid-align-end
水平对齐：
.grid-justify-start, .grid-justify-center, .grid-justify-end

最佳实践

  • 使用 .responsive-grid 作为基础响应式布局容器
  • 根据内容特性选择合适的列数变体
  • 使用 .grid-gap-* 控制网格项间距，保持视觉一致性
  • 在小屏幕上，所有网格都会自动折叠为单列，无需额外配置
  • 结合 .col-span-* 和 .row-span-* 可以创建复杂的网格布局

网格组件示例

基础网格布局

使用 .grid-2, .grid-3, .grid-4 等类创建不同列数的网格：

2列网格 (.grid-2)
网格项 1
网格项 2
3列网格 (.grid-3)
网格项 1
网格项 2
网格项 3
4列网格 (.grid-4)
网格项 1
网格项 2
网格项 3
网格项 4

网格间距变体

展示不同间距大小的网格效果：

小间距 (.grid-gap-2)
项 1
项 2
中等间距 (.grid-gap-4)
项 1
项 2
大间距 (.grid-gap-6)
项 1
项 2

网格对齐变体

展示不同对齐方式的网格效果：

垂直对齐示例

.grid-align-start

项 1
项 2
内容较高

.grid-align-center

项 1
项 2
内容较高

.grid-align-end

项 1
项 2
内容较高

跨列和跨行示例

使用 .col-span-* 和 .row-span-* 创建复杂布局：

横跨2列2行
项 2
项 3
项 4
项 5
横跨2列

响应式网格示例

.responsive-grid 在不同屏幕尺寸下自动调整列数：

  • 手机端：单列布局
  • 平板端：2列布局
  • 桌面端：3列布局
响应式项 1
响应式项 2
响应式项 3
响应式项 4
响应式项 5
响应式项 6