Con solo unas pocas reglas CSS, puede crear un diseño inspirado en la impresión que tiene la flexibilidad de la web. Es como tomar un periódico, pero a medida que el papel se hace más pequeño, las columnas se ajustarán y equilibrarán automáticamente permitiendo que el contenido fluya naturalmente.
.intro ( columns: 300px 2; )La columnspropiedad aceptará column-count, column-widtho ambas propiedades.
columns: || ;Se recomienda utilizar ambos column-county column-widthpara crear un diseño flexible de varias columnas. El column-countactuará como el número máximo de columnas, mientras que el column-widthdictará el ancho mínimo para cada columna. Al reunir estas propiedades, el diseño de varias columnas se dividirá automáticamente en una sola columna en anchos de navegador estrechos sin la necesidad de consultas de medios u otras reglas.
Un diseño de varias columnas funciona muy bien en elementos de bloque, incluidas listas, para hacer una navegación flexible.
Para ajustar aún más su diseño de varias columnas, utilícelo break-insideen elementos específicos para evitar que se atasquen entre columnas.
Más información
- Módulo de diseño de varias columnas CSS, nivel 1 (borrador de trabajo)
- Documentación MDN
Soporte de navegador
| ES DECIR | Borde | Firefox | Cromo | Safari | Ópera |
|---|---|---|---|---|---|
| 10+ | Todos | 9+ | 50+ | Todos | 11,5+ |
| Android Chrome | Android Firefox | Navegador de Android | Safari de iOS | Opera Mobile |
|---|---|---|---|---|
| Todos | Todos | Todos | Todos | Todos |