## 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

``` ::: ### Column spacing Column spacing is supported. ::: demo Row provides `gutter` attribute to specify spacings between columns, and its default value is 0. ```html

``` ::: ### Hybrid layout Form a more complex hybrid layout by combining the basic 1/24 columns. ::: demo ```html

``` ::: ### 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

``` ::: ### 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

``` ::: ### 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, **required** | 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 |