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 only
  • hidden-sm-only - hide when on small viewports and down
  • hidden-sm-and-down - hide when on small viewports and down
  • hidden-sm-and-up - hide when on small viewports and up
  • hidden-md-only - hide when on medium viewports only
  • hidden-md-and-down - hide when on medium viewports and down
  • hidden-md-and-up - hide when on medium viewports and up
  • hidden-lg-only - hide when on large viewports only
  • hidden-lg-and-down - hide when on large viewports and down
  • hidden-lg-and-up - hide when on large viewports and up
  • hidden-xl-only - hide when on extra large viewports only

Row Attributes

AttributeDescriptionTypeAccepted ValuesDefault
guttergrid spacingnumber0
justifyhorizontal alignment of flex layoutstringstart/end/center/space-around/space-betweenstart
alignvertical alignment of flex layoutstringtop/middle/bottomtop
tagcustom element tagstring*div

Row Slots

NameDescriptionSubtags
customize default contentCol

Col Attributes

AttributeDescriptionTypeAccepted ValuesDefault
spannumber of column the grid spansnumber24
offsetnumber of spacing on the left side of the gridnumber0
pushnumber of columns that grid moves to the rightnumber0
pullnumber of columns that grid moves to the leftnumber0
xs<768px Responsive columns or column props objectnumber/object (e.g. {span: 4, offset: 4})
sm≥768px Responsive columns or column props objectnumber/object (e.g. {span: 4, offset: 4})
md≥992px Responsive columns or column props objectnumber/object (e.g. {span: 4, offset: 4})
lg≥1200px Responsive columns or column props objectnumber/object (e.g. {span: 4, offset: 4})
xl≥1920px Responsive columns or column props objectnumber/object (e.g. {span: 4, offset: 4})
tagcustom element tagstring*div

Col Slots

NameDescription
customize default content