ElRow（行）和 ElCol（列）
1. ElRow：
ElRow 是一个用于定义行的组件，它包含了一组列（ElCol）。通过设置 gutter 属性，你可以定义列之间的间距。下面是一个简单的例子：
<template>
<el-row :gutter="20">
<el-col :span="8">第一列</el-col>
<el-col :span="8">第二列</el-col>
<el-col :span="8">第三列</el-col>
</el-row>
</template>
2. ElCol：
ElCol 是用于定义列的组件，它包含在 ElRow 内部。通过设置 span 属性，你可以定义列的宽度。span 的值可以是 0 到 24 之间的任意整数。下面是一个简单的例子：
<template>
<el-row :gutter="20">
<el-col :span="8">第一列</el-col>
<el-col :span="8">第二列</el-col>
<el-col :span="8">第三列</el-col>
</el-row>
</template>
栅格布局
Element Plus 的布局系统是基于 24 栅格的，每行被分为 24 个列。这样，你可以更灵活地控制每一列的宽度。例如，如果你想要实现一个两列布局，其中一列占用三分之一，另一列占用两分之一，可以这样写：
<el-row :gutter="20">
<el-col :span="8">占据 1/3</el-col>
<el-col :span="16">占据 2/3</el-col>
</el-row>
响应式布局
Element Plus 的布局系统也支持响应式设计。你可以使用 :xs、:sm、:md、:lg 和 :xl 属性来定义在不同屏幕尺寸下的列宽。例如：
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">适用于所有屏幕</el-col>
<el-col :xs="24" :sm="12" :md="16" :lg="18" :xl="20">适用于所有屏幕</el-col>
</el-row>
上述代码中，:xs 表示在所有屏幕尺寸下生效，:sm 表示在小于等于 768px 的屏幕尺寸下生效，以此类推。
这是 Element Plus 布局的基本使用说明。通过使用 ElRow 和 ElCol，你可以快速构建出灵活、响应式的网格布局，适应不同的屏幕尺寸。详细的文档和更高级的用法可以在 Element Plus 的[官方文档](https://element-plus.org/#/zh-CN/component/layout)中找到。
转载请注明出处：http://www.zyzy.cn/article/detail/5517/ElementPlus