columns

Índice

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.

PropertyChromeInternet Explorer / EdgeFirefoxSafariOpera
content 1.0 8.0 1.0 1.0 4.0

Bibliografía

Quizás quieras echar un vistazo a estas propiedades de CSS

¿Necesitas ayuda para crear tu Web?

Cuéntanos de que trata y te asesoraremos sin compromiso