Cómo usar columnas CSS3

Al aumentar la diversidad en los tamaños de monitores, no es práctico diseñar bloques de texto individuales que ocupen todo el ancho de la pantalla. La solución tradicional es dividir el texto en columnas manualmente, lo cual requiere mucho tiempo; o dividir el texto dinámicamente con JavaScript, que no funciona universalmente. Además, este es un problema de presentación, deberíamos poder diseñarlo con CSS sin el uso de sistemas de grillas o flotadores, ¿no?

CSS3 realmente proporciona una manera para que el estilo de su texto en varias columnas, incluso le da la posibilidad de establecer un canal - el espacio entre esas columnas - de esta manera tiene el control total en lugar del marco o sistema de cuadrícula configurando esas lagunas para usted .

Lo mejor de todo es que CSS3 se degrada graciosamente, por lo que si alguien navega en Netscape Navigator, su sitio no se romperá.

Soporte del navegador

Es importante tener en cuenta que, si bien todos los navegadores actuales admiten columnas múltiples en CSS3, incluso IE10, muchas versiones recientes, IE9 por ejemplo, no. Aunque el soporte es bueno, querrá incluir prefijos de navegador para webkit (-webkit-) y mozilla (-moz-). No es necesario incluir -ms- o -o- para IE y Opera, ya que admiten la función en su totalidad o no la incluyen.

Las propiedades

Esta característica de CSS realmente le da un puñado de propiedades para darle control total sobre cómo se imprime su contenido en el navegador y esas propiedades son:

• column-count: aquí especifica el número de columnas que desea aplicar al elemento.
• ancho de columna: el ancho de una sola columna. Tenga en cuenta que este valor probablemente será cambiado por el navegador.
• column-gap: el ancho del espacio entre las columnas.
• column-rule-width: la parte de regla es un tipo de borde para sus columnas y aquí especifica el ancho de ese borde.
• column-rule-style: también como el borde, si necesita especificar el estilo.
• column-rule-color: aquí el color de la regla.
• column-span: el valor aquí le indicará al navegador cuántas columnas desea que abarque un elemento, esto es bueno para los encabezados y funciona como colspan y rowspan en las tablas.

Con todas estas propiedades, no creo que realmente necesitemos algo más para tener un control total sobre nuestras columnas. Por supuesto, no todas estas propiedades son necesarias para que el diseño de múltiples columnas funcione, en realidad solo es necesario el conteo de columnas, pero siempre debe usar el espacio entre columnas para darle al texto un poco de espacio y no tener todas las columnas activadas. uno encima del otro.

Para poner esto en práctica solo toma dos líneas de código:

/* This will produce a 3 column layout with a gap of 20px between each column */.cols3 {column-count: 3;column-gap: 20px;}

Si también desea aplicar una regla a las columnas, solo necesita agregar las propiedades adicionales:

/* This will produce a 3 column layout and a gap of 20px between each column and a rule of 1px solid black */.cols3 {column-count: 3;column-gap: 20px;column-rule-width: 1px;column-rule-style: solid;column-rule-color: #000;}

Al igual que la propiedad de borde más común, también puede apilar el color, el estilo y el ancho en la misma línea, así:

.cols3 {column-count: 3;column-gap: 20px;column-rule: 1px solid #000;}

Si tiene un encabezado y desea que ese encabezado abarque todas las columnas, solo debe agregar una línea:

/*This h1 will take up the space of the 3 columns*/.cols3 h1{column-span: all;}

Manifestación

Puede aplicar esto a prácticamente cualquier HTML, de un solo párrafo a múltiples