Layout
Quickly and easily create layouts with the basic 24-column.
TIP
The component uses flex layout by default, no need to set type="flex" manually.
Please note that the parent container should avoid using inline related styles, which will cause the component to not fill up its width.
Basic layout
Create basic grid layout using columns.
Column spacing
Column spacing is supported.
Hybrid layout
Form a more complex hybrid layout by combining the basic 1/24 columns.
Column offset
You can specify column offsets.
Alignment
Default use the flex layout to make flexible alignment of columns.
Responsive Layout
Taking example by Bootstrap's responsive design, five breakpoints are preset: xs, sm, md, lg and xl.
Utility classes for hiding elements
Additionally, Element Plus provides a series of classes for hiding elements under certain conditions. These classes can be added to any DOM elements or custom components. You need to import the following CSS file to use these classes:
import 'element-plus/theme-chalk/display.css'
The classes are:
hidden-xs-only- hide when on extra small viewports onlyhidden-sm-only- hide when on small viewports and downhidden-sm-and-down- hide when on small viewports and downhidden-sm-and-up- hide when on small viewports and uphidden-md-only- hide when on medium viewports onlyhidden-md-and-down- hide when on medium viewports and downhidden-md-and-up- hide when on medium viewports and uphidden-lg-only- hide when on large viewports onlyhidden-lg-and-down- hide when on large viewports and downhidden-lg-and-up- hide when on large viewports and uphidden-xl-only- hide when on extra large viewports only
Row Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| gutter | grid spacing | number | — | 0 |
| justify | horizontal alignment of flex layout | string | start/end/center/space-around/space-between/space-evenly | start |
| align | vertical alignment of flex layout | string | top/middle/bottom | top |
| tag | custom element tag | string | * | div |
Row Slots
| Name | Description | Subtags |
|---|---|---|
| — | customize default content | Col |
Col Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| span | number of column the grid spans | number | — | 24 |
| offset | number of spacing on the left side of the grid | number | — | 0 |
| push | number of columns that grid moves to the right | number | — | 0 |
| pull | number of columns that grid moves to the left | number | — | 0 |
| xs | <768px Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
| sm | ≥768px Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
| md | ≥992px Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
| lg | ≥1200px Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
| xl | ≥1920px Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
| tag | custom element tag | string | * | div |
Col Slots
| Name | Description |
|---|---|
| — | customize default content |