## Layout Rápido y facilmente crea un layout básico con 24 columnas. :::tip 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. ::: ### Layout básico Crea un layout básico usando columnas. :::demo Con `row` y `col`, puede facilmente 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 Default use the flex layout to make flexible alignment of columns. :::demo You can define the layout of child elements by setting `justify` attribute with start, center, end, space-between or 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 Plus 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-plus/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 | | 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 | especific espacio en el lado izquierdo de la 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 |