Grid
Usa ERow y ECol para componer estructura responsiva antes de aplicar estilos de componentes. El grid controla el espaciado, el comportamiento por breakpoints y la distribución de columnas, mientras los componentes de contenido mantienen la responsabilidad visual y semántica.
Uso
Ajusta gap, los modificadores de fila y el span base de cols para previsualizar cómo el mismo contenido se adapta a distintas densidades de layout.
Columna A
Columna B
Columna C
Breakpoints responsivos
Combina cols con props de breakpoint como md y lg para definir spans mobile-first que se expanden progresivamente.
Contenido principal
Ocupa la mayor parte de la fila en pantallas medianas y grandes.
Barra lateral
Se apila bajo el contenido en móvil y se alinea al lado desde md.
Layouts anidados
Anida filas dentro de columnas cuando una región de contenido necesite un sub-grid interno. Mantén el anidamiento poco profundo y limitado a la parte de la página que realmente necesite estructura local.
Columna principal
Anidada A
Anidada B
Rail de apoyo
Úsalo para filtros, contexto o acciones rápidas.
Referencia API
Consulta las props públicas verificadas de ERow y ECol.
Props de ERow
| Propiedad | Tipo | Por defecto |
|---|---|---|
| dense | boolean | false |
Compacta el espaciado de la fila aplicando el modificador dense. | ||
| auto | boolean | false |
Activa el comportamiento de ancho automático para los hijos de la fila según su contenido y props de columna. | ||
| equal | boolean | false |
Distribuye el ancho disponible de forma equitativa entre columnas hermanas. | ||
| noGutters | boolean | false |
Elimina el gutter horizontal estándar entre columnas. | ||
| gap | GapValue | number | string | undefined |
Sobrescribe el gap de la fila con tokens del framework (none/xs/sm/md/lg) o con un valor entero en píxeles. | ||
Props de ECol
| Propiedad | Tipo | Por defecto |
|---|---|---|
| cols | number | string | 'auto' | undefined |
Define el span base de la columna sobre 12 tracks o usa auto. | ||
| xs | number | string | 'auto' | undefined |
Define el span para el breakpoint extra small. | ||
| sm | number | string | 'auto' | undefined |
Define el span para el breakpoint small. | ||
| md | number | string | 'auto' | undefined |
Define el span para el breakpoint medium. | ||
| lg | number | string | 'auto' | undefined |
Define el span para el breakpoint large. | ||
| xl | number | string | 'auto' | undefined |
Define el span para el breakpoint extra large. | ||
Slots y eventos
ERow y ECol exponen solo el slot default y no emiten eventos públicos.