Durante muchos años, los flotadores CSS han sido un componente exigente, aunque necesario, en la creación de diseños de sitios web. Si tu diseño requería múltiples columnas, te convertiste en flotadores. El problema con este método es que, a pesar del increíble ingenio que los diseñadores/desarrolladores web han demostrado en la creación de complejos diseños de sitios, los flotadores CSS nunca fueron diseñados para ser usados de esta manera.
Mientras que los flotadores y el posicionamiento CSS seguramente tendrán un lugar en el diseño web durante muchos años, las nuevas técnicas de diseño, incluyendo CSS Grid y Flexbox, ahora están dando a los diseñadores web nuevas formas de crear sus diseños de sitios. Otra nueva técnica de diseño que muestra mucho potencial es CSS Multiple Columns.
Las Columnas CSS existen desde hace algunos años, pero la falta de soporte en navegadores antiguos (principalmente versiones antiguas de Internet Explorer) ha impedido que muchos profesionales de la web utilicen estos estilos en su trabajo de producción.
Con el fin del soporte para las versiones anteriores de IE, algunos diseñadores web están experimentando ahora con nuevas opciones de diseño de CSS, incluidas las Columnas CSS, y descubriendo que tienen mucho más control con estos nuevos enfoques que con los flotadores.
Índice de contenidos
Los fundamentos de las columnas CSS
Como su nombre indica, CSS Multiple Columns (también conocido como CSS3 multi-column layout) le permite dividir el contenido en un número determinado de columnas. Las propiedades CSS más básicas que usted usaría son:
- recuento de columnas
- distancia entre columnas
Para el recuento de columnas, especifique el número de columnas que desee. El hueco de la columna serían los canales o el espaciamiento entre esas columnas. El navegador tomará estos valores y dividirá el contenido en partes iguales en el número de columnas que usted especifique.
Un ejemplo común de CSS con múltiples columnas en la práctica sería dividir un bloque de contenido de texto en múltiples columnas, similar a lo que se ve en un periódico. Supongamos que tiene la siguiente marcación HTML (tenga en cuenta que, por ejemplo, sólo estoy poniendo el comienzo de un párrafo, mientras que en la práctica es probable que haya varios párrafos de contenido en esta marcación):
Si entonces escribiste estos estilos CSS:
.content {-moz-columna-cantidad: 3;-webkit-columna-contar: 3;recuento de columnas: 3;-moz-columna-gap: 30px;-webkit-columna-gap: 30px;column-gap: 30px;}
Esta regla CSS dividiría la división de «contenido» en 3 columnas iguales con un espacio de 30 píxeles entre ellas. Si usted quisiera dos columnas en lugar de 3, simplemente cambiaría ese valor y el navegador calcularía los nuevos anchos de esas columnas para dividir el contenido uniformemente. Observe que primero utilizamos las propiedades prefijadas por el vendedor, seguidas de las declaraciones no prefijadas.
Tan fácil como esto es, su uso de esta manera es cuestionable para el uso del sitio web. Sí, puede dividir un montón de contenido en varias columnas, pero esta puede no ser la mejor experiencia de lectura para la Web, especialmente si la altura de estas columnas cae por debajo del «pliegue» de la pantalla.
Los lectores tendrían que desplazarse hacia arriba y hacia abajo para leer el contenido completo. Aún así, el principio de CSS Columns es tan fácil como se ve aquí, y puede ser usado para hacer mucho más que dividir el contenido de algunos párrafos – de hecho, puede ser usado para la maquetación.
Diseño con columnas CSS
Diga que tiene una página web con un área de contenido que tiene 3 columnas de contenido. Este es un diseño muy típico del sitio web, y para lograr esas 3 columnas, normalmente flotarían las divisiones que están dentro. Con las múltiples columnas CSS, es mucho más fácil.
Algunos ejemplos de HTML:
Usando Ancho de Columna
Hay otra propiedad además de «column-count» que puede utilizar, y dependiendo de sus necesidades de diseño, puede ser una mejor opción para su sitio. Esto es «ancho de columna». Usando la misma marcación HTML que se mostró anteriormente, podríamos hacerlo con nuestro CSS:
La forma en que esto funciona es que el navegador utiliza este «ancho de columna» como el valor máximo de esa columna. Así que si la ventana del navegador tiene menos de 500 píxeles de ancho, estas 3 divisiones aparecerán en una sola columna, una de las partes superiores de otra. Este es un diseño típico usado para diseños de pantallas móviles/pequeñas.
A medida que el ancho del navegador aumenta hasta ser lo suficientemente grande como para que quepan 2 columnas junto con los espacios entre columnas especificados, el navegador pasará automáticamente de un diseño de una sola columna a dos columnas. Sigue aumentando el ancho de la pantalla y eventualmente, obtendrás un diseño de 3 columnas, con cada una de nuestras 3 divisiones mostradas en su propia columna. Una vez más, esta es una gran manera de obtener algunos diseños sensibles y amigables para múltiples dispositivos, y ni siquiera necesita usar consultas multimedia para cambiar los estilos de diseño.
Otras propiedades de la columna
Además de las propiedades cubiertas aquí, también hay propiedades para la «regla de columna», incluyendo los valores de color, estilo y ancho que le permiten crear reglas entre sus columnas. Éstos se utilizarían en lugar de los bordes si desea tener algunas líneas que separen las columnas.
Tiempo para experimentar
Actualmente, CSS Multiple Column Layout está muy bien soportado. Con prefijos, más del 94% de los usuarios de la web podrían ver estos estilos, y ese grupo sin soporte sería en realidad sólo versiones mucho más antiguas de Internet Explorer, que de todos modos ya no son compatibles.
Con este nivel de soporte ya establecido, no hay razón para no empezar a experimentar con Columnas CSS y desplegar estos estilos en sitios web listos para producción. Puede iniciar sus experimentos utilizando el HTML y CSS que se presentan en este documento y jugar con diferentes valores para ver qué es lo que mejor se adapta a las necesidades de diseño de su sitio.
