mirror of https://github.com/ElemeFE/element
299 lines
8.7 KiB
Markdown
299 lines
8.7 KiB
Markdown
## Layout
|
||
|
||
Quickly and easily create layouts with the basic 24-column.
|
||
|
||
### Basic layout
|
||
|
||
Create basic grid layout using columns.
|
||
|
||
::: demo With `row` and `col`, we can easily manipulate the layout using the `span` attribute.
|
||
```html
|
||
<el-row>
|
||
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
|
||
<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||
<el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
|
||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
|
||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
|
||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
|
||
</el-row>
|
||
|
||
<style>
|
||
.el-row {
|
||
margin-bottom: 20px;
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
.el-col {
|
||
border-radius: 4px;
|
||
}
|
||
.bg-purple-dark {
|
||
background: #99a9bf;
|
||
}
|
||
.bg-purple {
|
||
background: #d3dce6;
|
||
}
|
||
.bg-purple-light {
|
||
background: #e5e9f2;
|
||
}
|
||
.grid-content {
|
||
border-radius: 4px;
|
||
min-height: 36px;
|
||
}
|
||
.row-bg {
|
||
padding: 10px 0;
|
||
background-color: #f9fafc;
|
||
}
|
||
</style>
|
||
```
|
||
:::
|
||
|
||
### Column spacing
|
||
|
||
Column spacing is supported.
|
||
|
||
::: demo Row provides `gutter` attribute to specify spacings between columns, and its default value is 0.
|
||
```html
|
||
<el-row :gutter="20">
|
||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||
</el-row>
|
||
|
||
<style>
|
||
.el-row {
|
||
margin-bottom: 20px;
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
.el-col {
|
||
border-radius: 4px;
|
||
}
|
||
.bg-purple-dark {
|
||
background: #99a9bf;
|
||
}
|
||
.bg-purple {
|
||
background: #d3dce6;
|
||
}
|
||
.bg-purple-light {
|
||
background: #e5e9f2;
|
||
}
|
||
.grid-content {
|
||
border-radius: 4px;
|
||
min-height: 36px;
|
||
}
|
||
.row-bg {
|
||
padding: 10px 0;
|
||
background-color: #f9fafc;
|
||
}
|
||
</style>
|
||
```
|
||
:::
|
||
|
||
### Hybrid layout
|
||
|
||
Form a more complex hybrid layout by combining the basic 1/24 columns.
|
||
|
||
::: demo
|
||
```html
|
||
<el-row :gutter="20">
|
||
<el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
|
||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||
<el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
|
||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||
</el-row>
|
||
|
||
<style>
|
||
.el-row {
|
||
margin-bottom: 20px;
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
.el-col {
|
||
border-radius: 4px;
|
||
}
|
||
.bg-purple-dark {
|
||
background: #99a9bf;
|
||
}
|
||
.bg-purple {
|
||
background: #d3dce6;
|
||
}
|
||
.bg-purple-light {
|
||
background: #e5e9f2;
|
||
}
|
||
.grid-content {
|
||
border-radius: 4px;
|
||
min-height: 36px;
|
||
}
|
||
.row-bg {
|
||
padding: 10px 0;
|
||
background-color: #f9fafc;
|
||
}
|
||
</style>
|
||
```
|
||
:::
|
||
|
||
### Column offset
|
||
|
||
You can specify column offsets.
|
||
|
||
::: demo You can specify the number of column offset by setting the value of `offset` attribute of Col.
|
||
|
||
```html
|
||
<el-row :gutter="20">
|
||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||
</el-row>
|
||
|
||
<style>
|
||
.el-row {
|
||
margin-bottom: 20px;
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
.el-col {
|
||
border-radius: 4px;
|
||
}
|
||
.bg-purple-dark {
|
||
background: #99a9bf;
|
||
}
|
||
.bg-purple {
|
||
background: #d3dce6;
|
||
}
|
||
.bg-purple-light {
|
||
background: #e5e9f2;
|
||
}
|
||
.grid-content {
|
||
border-radius: 4px;
|
||
min-height: 36px;
|
||
}
|
||
.row-bg {
|
||
padding: 10px 0;
|
||
background-color: #f9fafc;
|
||
}
|
||
</style>
|
||
```
|
||
:::
|
||
|
||
### Alignment
|
||
|
||
Flexible alignment of columns.
|
||
|
||
::: demo You can enable flex layout by setting `type` attribute to 'flex', and define the layout of child elements by setting `justify` attribute with start, center, end, space-between or space-around.
|
||
```html
|
||
<el-row type="flex" class="row-bg">
|
||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||
</el-row>
|
||
<el-row type="flex" class="row-bg" justify="center">
|
||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||
</el-row>
|
||
<el-row type="flex" class="row-bg" justify="end">
|
||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||
</el-row>
|
||
<el-row type="flex" class="row-bg" justify="space-between">
|
||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||
</el-row>
|
||
<el-row type="flex" class="row-bg" justify="space-around">
|
||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||
</el-row>
|
||
|
||
<style>
|
||
.el-row {
|
||
margin-bottom: 20px;
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
.el-col {
|
||
border-radius: 4px;
|
||
}
|
||
.bg-purple-dark {
|
||
background: #99a9bf;
|
||
}
|
||
.bg-purple {
|
||
background: #d3dce6;
|
||
}
|
||
.bg-purple-light {
|
||
background: #e5e9f2;
|
||
}
|
||
.grid-content {
|
||
border-radius: 4px;
|
||
min-height: 36px;
|
||
}
|
||
.row-bg {
|
||
padding: 10px 0;
|
||
background-color: #f9fafc;
|
||
}
|
||
</style>
|
||
```
|
||
:::
|
||
|
||
### Row Attributes
|
||
| Attribute | Description | Type | Accepted Values | Default |
|
||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||
| gutter | grid spacing | number | — | 0 |
|
||
| type | layout mode, you can use flex, works in modern browsers | string | — | — |
|
||
| justify | horizontal alignment of flex layout | string | start/end/center/space-around/space-between | start |
|
||
| align | vertical alignment of flex layout | string | top/middle/bottom | top |
|
||
|
||
### Col Attributes
|
||
| Attribute | Description | Type | Accepted Values | Default |
|
||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||
| span | number of column the grid spans | number | — | — |
|
||
| 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 (i.e： {span: 4, offset: 4}) | — | — |
|
||
| sm | `≥768px` Responsive columns or column props object | number/object (i.e： {span: 4, offset: 4}) | — | — |
|
||
| md | `≥992` Responsive columns or column props object | number/object (i.e： {span: 4, offset: 4}) | — | — |
|
||
| lg | `≥1200` Responsive columns or column props object | number/object (i.e： {span: 4, offset: 4}) | — | — |
|
||
|