grid → display:grid
grid-cols-*
grid-rows-*
//#### 容器相关的类:
.grid: 创建一个 grid 容器。
.grid-cols-[value]: 设置列的数量。
.grid-rows-[value]: 设置行的数量。
.gap-[value]: 设置 grid 项目之间的间隙。
//#### 空间分配相关的类:
.col-span-[value]: 设置项目跨越的列数。
.row-span-[value]: 设置项目跨越的行数。
.col-start-[value]: 设置项目的起始列。
.row-start-[value]: 设置项目的起始行。
https://tailwindcss.com/docs/grid-column
//#### 容器相关的类-------------------------------
.flex: 创建一个 flex 容器。
.flex-row: 设置主轴方向为水平。
.flex-col: 设置主轴方向为垂直。
.flex-wrap: 允许项目换行。
.flex-nowrap: 禁止项目换行。
//#### 对齐方式相关的类-------------------------------
.justify-start: 主轴起始位置对齐。
.justify-end: 主轴结束位置对齐。
.justify-center: 主轴居中对齐。
.justify-between: 主轴两端对齐，项目间平均分布。
.justify-around: 主轴两端对齐，项目间间隔相等。
.items-start: 交叉轴起始位置对齐。
.items-end: 交叉轴结束位置对齐。
.items-center: 交叉轴居中对齐。
.items-baseline: 交叉轴对齐到基线。
#### 空间分配相关的类-------------------------------
.flex-grow: 项目将占据剩余空间。
.flex-shrink: 项目可以缩小。
.flex-basis-[value]: 设置项目的初始大小。
// Tailwind CSS 默认提供了以下像素分层
sm: 小屏，大约 640px 宽度及以上的屏幕
md: 中屏，大约 768px 宽度及以上的屏幕
lg: 大屏，大约 1024px 宽度及以上的屏幕
xl: 超大屏，大约 1280px 宽度及以上的屏幕
2xl: 非常大的屏幕，大约 1536px 宽度及以上