## Layout Rápido y fácilmente crea un layout básico con 24 columnas. ### Layout básico Crea un layout básico usando columnas. :::demo Con `row` y `col`, puede fácilmente manipular el layout usando el atributo `span`. ```html

``` ::: ### Espaciado de columnas El espaciado de columnas está soportado. :::demo Row provee el atributo `gutter` para especificar el espacio entre columnas y su valor por defecto es 0. ```html

``` ::: ### Layout híbrido Crea un complejo layout híbrido combinando el básico de 1/24 columnas. :::demo ```html

``` ::: ### Offset de columnas Puedes especificar offsets para las columnas. :::demo Puedes especificar el offset para una columna mediante el atributo `offset` de Col. ```html

``` ::: ### Alineación Usa flex layout para un alineamiento flexible de columnas. :::demo Puede habilitar flex layout asignando el atributo `type` a 'flex', y definir el layout de elementos hijos asignando el atributo `justify` con los valores start, center, end, space-between o space-around. ```html

``` ::: ### Responsive Layout Tomando el ejemplo de Bootstrap responsive design, existen 5 breakpoints: xs, sm, md, lg y xl. :::demo ```html

``` ::: ### Clases útiles para ocultar elementos Adicionalmente, Element provee una serie de clases para ocultar elementos dadas ciertas condiciones. Estas clases pueden se agregadas a cualquier elemento del DOM o un elemento propio. Necesita importar el siguiente archivo CSS para usar estas clases: ```js import 'element-ui/lib/theme-chalk/display.css'; ``` Las clases son: - `hidden-xs-only` - oculto en viewports extra pequeños solamente - `hidden-sm-only` - oculto en viewports pequeños solamente - `hidden-sm-and-down` - oculto en viewports pequeños y menores - `hidden-sm-and-up` - oculto en viewports pequeños y superiores - `hidden-md-only` - oculto en viewports medios solamente - `hidden-md-and-down` - oculto en viewports medios y menores - `hidden-md-and-up` - oculto en viewports medios y mayores - `hidden-lg-only` - ocultos en viewports grandes solamente - `hidden-lg-and-down` - ocultos en viewports grandes y menores - `hidden-lg-and-up` - ocultos en viewports grandes y superiores - `hidden-xl-only` - oculto en viewports extra grandes solamente ### Atributos Row | Atributos | Descripción | Tipo | Valores aceptados | Valor por defecto | | --------- | ---------------------------------------- | ------ | ---------------------------------------- | ----------------- | | gutter | espaciado de la grilla | number | — | 0 | | type | modo del layout , puedes usar flex, funciona en navegadores modernos | string | — | — | | justify | alineación horizontal del layout flex | string | start/end/center/space-around/space-between | start | | align | alineación vertical del layout flex | string | top/middle/bottom | top | | tag | tag de elemento propio | string | * | div | ### Atributos Col | Atributos | Descripción | Tipo | Valores aceptados | Valor por defecto | | --------- | ------------------------------------------------------------ | ----------------------------------------- | ----------------- | ----------------- | | span | número de columnas que abarca la cuadrícula | number | — | 24 | | offset | especifica el espacio en el lado izquierdo del grill | number | — | 0 | | push | número de columnas que la grilla se mueve hacia la derecha | number | — | 0 | | pull | número de columnas que la grilla se mueve hacia la izquierda | number | — | 0 | | xs | `<768px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | — | — | | sm | `≥768px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | — | — | | md | `≥992px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | — | — | | lg | `≥1200px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | — | — | | xl | `≥1920px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | — | — | | tag | tag de elemento propio | string | * | div |