Layout
Quickly and easily create layouts with the basic 24-column.
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.
The basic unit of a column is 1, with a maximum of 24 and a minimum of 0.
Basic layout
Create basic grid layout using columns.
With row and col, we can easily manipulate the layout using the span attribute.
export function RowBasic() { return ( <div> <ElRow style={rowSpacing}> <ElCol className={styles.col} span={24}> <div style={purpleDark} /> </ElCol> </ElRow> <ElRow style={rowSpacing}> <ElCol className={styles.col} span={12}> <div style={purple} /> </ElCol> <ElCol className={styles.col} span={12}> <div style={purpleLight} /> </ElCol> </ElRow> <ElRow style={rowSpacing}> <ElCol className={styles.col} span={8}> <div style={purple} /> </ElCol> <ElCol className={styles.col} span={8}> <div style={purpleLight} /> </ElCol> <ElCol className={styles.col} span={8}> <div style={purple} /> </ElCol> </ElRow> <ElRow style={rowSpacing}> {[0, 1, 2, 3].map((index) => ( <ElCol className={styles.col} key={index} span={6}> <div style={index % 2 === 0 ? purple : purpleLight} /> </ElCol> ))} </ElRow> <ElRow> {[0, 1, 2, 3, 4, 5].map((index) => ( <ElCol className={styles.col} key={index} span={4}> <div style={index % 2 === 0 ? purple : purpleLight} /> </ElCol> ))} </ElRow> </div> ); } Column spacing
Column spacing is supported.
Row provides gutter attribute to specify spacings between columns, and its default value is 0.
export function RowGutter() { return ( <ElRow gutter={20}> {[0, 1, 2, 3].map((index) => ( <ElCol className={styles.col} key={index} span={6}> <div style={purple} /> </ElCol> ))} </ElRow> ); } Hybrid layout
Form a more complex hybrid layout by combining the basic 1/24 columns.
export function RowHybrid() { return ( <div> <ElRow gutter={20} style={rowSpacing}> <ElCol className={styles.col} span={16}> <div style={purple} /> </ElCol> <ElCol className={styles.col} span={8}> <div style={purple} /> </ElCol> </ElRow> <ElRow gutter={20} style={rowSpacing}> <ElCol className={styles.col} span={8}> <div style={purple} /> </ElCol> <ElCol className={styles.col} span={8}> <div style={purple} /> </ElCol> <ElCol className={styles.col} span={4}> <div style={purple} /> </ElCol> <ElCol className={styles.col} span={4}> <div style={purple} /> </ElCol> </ElRow> <ElRow gutter={20}> <ElCol className={styles.col} span={4}> <div style={purple} /> </ElCol> <ElCol className={styles.col} span={16}> <div style={purple} /> </ElCol> <ElCol className={styles.col} span={4}> <div style={purple} /> </ElCol> </ElRow> </div> ); } Column offset
You can specify column offsets.
You can specify the number of column offset by setting the value of offset attribute of Col.
export function RowOffset() { return ( <div> <ElRow gutter={20} style={rowSpacing}> <ElCol className={styles.col} span={6}> <div style={purple} /> </ElCol> <ElCol className={styles.col} span={6} offset={6}> <div style={purple} /> </ElCol> </ElRow> <ElRow gutter={20} style={rowSpacing}> <ElCol className={styles.col} span={6} offset={6}> <div style={purple} /> </ElCol> <ElCol className={styles.col} span={6} offset={6}> <div style={purple} /> </ElCol> </ElRow> <ElRow gutter={20}> <ElCol className={styles.col} span={12} offset={6}> <div style={purple} /> </ElCol> </ElRow> </div> ); } Alignment
Default use the flex layout to make flexible alignment of columns.
You can define the layout of child elements by setting justify attribute with start, center, end, space-between, space-around or space-evenly.
export function RowJustify() { const justifies = [ "start", "center", "end", "space-between", "space-around", "space-evenly", ] as const; return ( <div> {justifies.map((justify, index) => ( <ElRow key={justify} justify={justify} className={styles.rowBg} style={index === justifies.length - 1 ? undefined : rowSpacing} > <ElCol className={styles.col} span={6}> <div style={purple} /> </ElCol> <ElCol className={styles.col} span={6}> <div style={purpleLight} /> </ElCol> <ElCol className={styles.col} span={6}> <div style={purple} /> </ElCol> </ElRow> ))} </div> ); } Responsive Layout
Taking example by Bootstrap's responsive design, five breakpoints are preset:
xs, sm, md, lg and xl.
export function RowResponsive() { return ( <ElRow gutter={10}> <ElCol className={styles.col} xs={8} sm={6} md={4} lg={3} xl={1}> <div style={purple} /> </ElCol> <ElCol className={styles.col} xs={4} sm={6} md={8} lg={9} xl={11}> <div style={purpleLight} /> </ElCol> <ElCol className={styles.col} xs={4} sm={6} md={8} lg={9} xl={11}> <div style={purple} /> </ElCol> <ElCol className={styles.col} xs={8} sm={6} md={4} lg={3} xl={1}> <div style={purpleLight} /> </ElCol> </ElRow> ); } 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 onlyhidden-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 API
Row Attributes
Name Description Type Default gutter grid spacing number0 justify horizontal alignment of flex layout enumstart align vertical alignment of flex layout enum— tag custom element tag stringdiv
Row Slots
Name Description Subtags default customize default content Col
Col API
Col Attributes
Name Description Type Default span number of column the grid spans number24 offset number of spacing on the left side of the grid number0 push number of columns that grid moves to the right number0 pull number of columns that grid moves to the left number0 xs <768px Responsive columns or column props objectnumberobject— sm ≥768px Responsive columns or column props objectnumberobject— md ≥992px Responsive columns or column props objectnumberobject— lg ≥1200px Responsive columns or column props objectnumberobject— xl ≥1920px Responsive columns or column props objectnumberobject— tag custom element tag stringdiv
Col Slots
Name Description default customize default content
