jiaiyan Layout Grid System
Element Plus provides a 24-column grid system for quickly and easily creating responsive layouts.
When to Use
- Creating responsive grid layouts
- Building page structures
- Implementing column-based designs
- Responsive design with breakpoints
Basic Concepts
- 24-column system: The basic unit is 1, with a maximum of 24 and a minimum of 0
- Flex layout: Uses flex layout by default
- Responsive: Five breakpoints preset: xs, sm, md, lg, xl
Basic Layout
Create basic grid layout using Row and Col components with the span attribute.
<template>
<el-row>
<el-col :span="24"><div class="grid-content">24</div></el-col>
</el-row>
<el-row>
<el-col :span="12"><div class="grid-content">12</div></el-col>
<el-col :span="12"><div class="grid-content">12</div></el-col>
</el-row>
<el-row>
<el-col :span="8"><div class="grid-content">8</div></el-col>
<el-col :span="8"><div class="grid-content">8</div></el-col>
<el-col :span="8"><div class="grid-content">8</div></el-col>
</el-row>
</template>
Column Spacing
Row provides gutter attribute to specify spacings between columns.
<template>
<el-row :gutter="20">
<el-col :span="6"><div class="grid-content">6</div></el-col>
<el-col :span="6"><div class="grid-content">6</div></el-col>
<el-col :span="6"><div class="grid-content">6</div></el-col>
<el-col :span="6"><div class="grid-content">6</div></el-col>
</el-row>
</template>
Column Offset
Specify column offsets using the offset attribute.
<template>
<el-row :gutter="20">
<el-col :span="6"><div class="grid-content">6</div></el-col>
<el-col :span="6" :offset="6"><div class="grid-content">6 offset 6</div></el-col>
</el-row>
</template>
Alignment
Use flex layout for flexible alignment with the justify attribute.
<template>
<el-row justify="center">
<el-col :span="6"><div class="grid-content">center</div></el-col>
</el-row>
<el-row justify="end">
<el-col :span="6"><div class="grid-content">end</div></el-col>
</el-row>
<el-row justify="space-between">
<el-col :span="6"><div class="grid-content">space-between</div></el-col>
<el-col :span="6"><div class="grid-content">space-between</div></el-col>
</el-row>
</template>
Justify Options
| Value | Description |
|---|---|
start |
Align items to the start |
end |
Align items to the end |
center |
Center items |
space-around |
Equal space around items |
space-between |
Equal space between items |
space-evenly |
Equal space between and around items |
Responsive Layout
Five breakpoints are preset based on Bootstrap's responsive design:
| Breakpoint | Screen Width |
|---|---|
xs |
< 768px |
sm |
≥ 768px |
md |
≥ 992px |
lg |
≥ 1200px |
xl |
≥ 1920px |
<template>
<el-row :gutter="10">
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
<div class="grid-content">Responsive</div>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
<div class="grid-content">Responsive</div>
</el-col>
</el-row>
</template>
Responsive Object Syntax
<template>
<el-col :xs="{ span: 24, offset: 0 }" :sm="{ span: 12, offset: 2 }">
<div class="grid-content">Responsive with offset</div>
</el-col>
</template>
Utility Classes for Hiding Elements
Import the CSS file to use hiding utility classes:
import 'element-plus/theme-chalk/display.css'
Available Classes
| Class | Description |
|---|---|
hidden-xs-only |
Hide on extra small viewports only |
hidden-sm-only |
Hide on small viewports only |
hidden-sm-and-down |
Hide on small viewports and down |
hidden-sm-and-up |
Hide on small viewports and up |
hidden-md-only |
Hide on medium viewports only |
hidden-md-and-down |
Hide on medium viewports and down |
hidden-md-and-up |
Hide on medium viewports and up |
hidden-lg-only |
Hide on large viewports only |
hidden-lg-and-down |
Hide on large viewports and down |
hidden-lg-and-up |
Hide on large viewports and up |
hidden-xl-only |
Hide on extra large viewports only |
API Reference
Row Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| gutter | Grid spacing | number |
0 |
| justify | Horizontal alignment | 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly' |
'start' |
| align | Vertical alignment | 'top' | 'middle' | 'bottom' |
— |
| tag | Custom element tag | string |
'div' |
Col Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| span | Number of columns the grid spans | number |
24 |
| offset | Number of spacing on the left side | number |
0 |
| push | Number of columns to move right | number |
0 |
| pull | Number of columns to move left | number |
0 |
| xs | <768px Responsive columns |
number | object |
— |
| sm | ≥768px Responsive columns |
number | object |
— |
| md | ≥992px Responsive columns |
number | object |
— |
| lg | ≥1200px Responsive columns |
number | object |
— |
| xl | ≥1920px Responsive columns |
number | object |
— |
| tag | Custom element tag | string |
'div' |
Best Practices
- Use gutter: Add spacing between columns for better readability
- Responsive design: Use breakpoint props for mobile-first design
- Avoid inline styles: Parent containers should avoid inline styles
- Combine with Container: Use with Container for full page layouts