Definición de .columns aplicado en CSS
Con solo unas pocas reglas CSS, puede crear un diseño inspirado en impresión que tenga la flexibilidad de la web. Es como tomar un periódico, pero a medida que el documento se hace más pequeño, el .columns se ajustará y equilibrará automáticamente automáticamente el contenido fluye naturalmente.
Ejemplo de uso de la propiedad columns
Esta propiedad de CSS habitualmente se utiliza de la siguiente manera:
.intro {
columns: 300px 2;
}Otro ejemplo más avanzado de .columns es el siguiente de CODEPEN:
Sintaxis de .columns en CSS
columns: auto|column-width column-count|initial|inherit;Valores
| Valor | Descripción | Manifestación |
|---|---|---|
| auto | Valor por defecto. Establece tanto el ancho de columna como el recuento de columnas en "automático" | |
| Define el ancho mínimo para cada columna | ||
| Define el número máximo de columnas | ||
| inicial | Establece esta propiedad en su valor predeterminado. | |
| heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .columns
Los números de la tabla especifican la primera versión del navegador que es completamente compatible con la propiedad.
Los números seguidos de -webkit- especifican la primera versión que funcionó con un prefijo.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| content | 1.0 | 8.0 | 1.0 | 1.0 | 4.0 |
