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

element-plus-design-layout