el-row el-col el-card教程

el-row、el-col和el-card是Element UI框架中的组件，可以用于网格布局和展示卡片式内容。

el-row是Element UI中用于创建网格布局的组件，可以将页面的内容划分为多个列。可以使用gutter属性来设置列之间的间隔。另外，如果想要让el-row的高度也固定，可以使用height属性。

el-col是el-row的子组件，用于创建具体的列。可以使用span属性来设置每一列的宽度比例，例如:span="12"表示该列占据父元素宽度的一半。

el-card是用于展示卡片式内容的组件。可以通过slot来自定义卡片的头部、内容部分和底部。可以使用el-card组件的padding属性来设置卡片的内边距。

通过使用el-row、el-col和el-card组件，可以创建出具有网格布局的页面，并且在每个网格中展示卡片式内容。这些组件在Element UI的文档中有详细的教程和用法示例，你可以参考Element UI的官方文档来学习更多关于这些组件的用法。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [element-el-row-el-col使用布局，修改el-card边距＜el-card :body-style=“{padding:‘10px‘}“＞card1＜/...](https://blog.csdn.net/jieweiwujie/article/details/120378615)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [Element-UI 使用el-row 分栏布局的教程](https://download.csdn.net/download/weixin_38556822/14662196)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [vue el-row固定](https://blog.csdn.net/weixin_35751412/article/details/129069975)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]