核心概念：24 栅格系统
el-row 和 el-col 是 Element Plus 的栅格布局系统，本质作用是：把页面按 24 列进行分栏布局，让页面排版整齐、响应式。
Element Plus 把页面 横向分成 24 份。
|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
布局规则：
el-row → 一行
el-col → 一列
span → 占多少列
el-row（行）
el-row 表示 一整行容器。
示例：
<el-row>
...
</el-row>
作用：创建一行布局
在这一行里可以放多个 el-col。
el-col（列）
el-col 表示 一列。
最重要属性：span，表示占多少列。
示例：<el-col :span="12">
意思：占 24 列中的 12 列。也就是：50%宽度
最简单例子
<el-row>
<el-col :span="12">左边</el-col>
<el-col :span="12">右边</el-col>
</el-row>
效果：
|-----------左-----------|-----------右-----------|
因为 12 + 12 = 24
常见布局示例
两列布局
<el-row>
<el-col :span="12">A</el-col>
<el-col :span="12">B</el-col>
</el-row>
效果
|------A------|------B------|
三列布局
<el-row>
<el-col :span="8">A</el-col>
<el-col :span="8">B</el-col>
<el-col :span="8">C</el-col>
</el-row>
效果
|----A----|----B----|----C----|
不等宽布局
<el-row>
<el-col :span="6">侧边栏</el-col>
<el-col :span="18">内容</el-col>
</el-row>
效果
|--sidebar--|-------content-------|
offset（偏移）
offset 表示 左侧空多少列。
例子：<el-col :span="20" :offset="2">
解释：左边空 2 列；内容占 20 列；右边剩 2 列
效果：
| 空 |----------内容----------| 空 |
2 20 2
又比如：
<el-row>
<el-col :span="20" :offset="2">
<el-form>
...
</el-form>
</el-col>
</el-row>
实际布局：
|空|--------------表单--------------|空|
2 20 2
这样页面不会贴边，看起来更舒服。
gutter（列间距）
gutter 表示 列之间的间距。
例子：
<el-row :gutter="20">
<el-col :span="12">A</el-col>
<el-col :span="12">B</el-col>
</el-row>
效果：
|----A----| 20px |----B----|
