Durante muchos años, CSS flota ha sido un componente delicado, pero necesario, en la creación de diseños de sitios web. Si su diseño requería múltiples columnas, recurrió a flotadores. El problema con este método es que, a pesar del increíble ingenio que los diseñadores / desarrolladores web han demostrado al crear un sitio complejo diseños, Los flotantes CSS nunca fueron realmente diseñados para usarse de esta manera.
Si bien los flotadores y el posicionamiento CSS seguramente tendrán un lugar en el diseño web durante muchos años, el diseño más nuevo Las técnicas que incluyen CSS Grid y Flexbox ahora brindan a los diseñadores web nuevas formas de crear sus diseños de sitios. Otra nueva técnica de diseño que muestra un gran potencial es CSS Multiple Columns.
Las columnas CSS existen desde hace algunos años, pero la falta de soporte en los navegadores más antiguos (principalmente versiones de Internet Explorer) ha impedido que muchos profesionales web utilicen estos estilos en su producción. trabaja.
Con el fin de la compatibilidad con las versiones anteriores de IE, algunos diseñadores web ahora están experimentando con un nuevo diseño CSS. opciones, columnas CSS incluidas, y descubrir que tienen mucho más control con estos nuevos enfoques que con flotadores.
Los fundamentos de las columnas CSS
Como sugiere su nombre, CSS Multiple Columns (también conocido como CSS3 diseño de varias columnas) le permite dividir el contenido en un número determinado de columnas. Las propiedades CSS más básicas que usaría son:
- recuento de columnas
- espacio entre columnas
Para el recuento de columnas, especifique el número de columnas que desee. El espacio de la columna serían las canaletas o el espacio entre esas columnas. El navegador tomará estos valores y dividirá el contenido de manera uniforme en el número de columnas que 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 vería en un artículo de periódico. Supongamos que tiene el siguiente marcado HTML (tenga en cuenta que, por ejemplo, solo hemos puesto el inicio de un párrafo, mientras que en la práctica probablemente habría varios párrafos de contenido en este marcado):
El título de tu artículo.
Imagina muchos párrafos de texto aquí ...
Si luego escribió estos estilos CSS:
.contenido {
-moz-column-count: 3;
-webkit-column-count: 3;
recuento de columnas: 3;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
espacio entre columnas: 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 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 de manera uniforme. Tenga en cuenta que usamos primero las propiedades con prefijo de proveedor, seguidas de las declaraciones sin prefijo.
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 puede que esta no sea la mejor lectura. experiencia para la Web, especialmente si la altura de estas columnas cae por debajo del "pliegue" del 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 puede ver aquí, y puede usarse para hacer mucho más que simplemente dividir el contenido de algunos párrafos; de hecho, puede usarse para el diseño.
Diseño con columnas CSS
Digamos que tiene una página web con un área de contenido que tiene 3 columnas de contenido. Este es un diseño de sitio web muy común, y para lograr esas 3 columnas, normalmente flotaría las divisiones que se encuentran en. Con CSS de múltiples columnas, es mucho más fácil.
Aquí hay algunos ejemplos de HTML:
De Nuestro Blog.
El contenido iría aquí ...
Próximos Eventos.
El contenido iría aquí ...
El CSS para hacer estas múltiples columnas comienza con lo que vio anteriormente:
.contenido {
-moz-column-count: 3;
-webkit-column-count: 3;
recuento de columnas: 3;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
espacio entre columnas: 30px;
}
Ahora, el desafío aquí es que el navegador quiere dividir este contenido de manera uniforme, por lo que si la longitud del contenido de estas divisiones es diferente, ese navegador realmente dividirá el contenido de un división individual, agregando el comienzo de la misma a una columna y luego continuando en otra (puede ver esto usando este código para ejecutar un experimento y agregar diferentes longitudes de contenido dentro de cada división).
Eso no es lo que quieres. Desea que cada una de estas divisiones cree una columna distinta y, sin importar cuán grande o pequeño sea el contenido de una división individual, nunca desea que se divida. Puede lograr esto agregando esta línea adicional de CSS:
.content div {
pantalla: bloque en línea;
}
Esto obligará a las divisiones que están dentro del "contenido" a permanecer intactas incluso si el navegador lo divide en varias columnas. Aún mejor, dado que no le dimos a nada aquí un ancho fijo, estas columnas cambiarán de tamaño automáticamente a medida que cambia el tamaño del navegador, lo que las convierte en una aplicación ideal para sitios web receptivos. Con ese estilo de "bloque en línea" en su lugar, cada una de sus 3 divisiones será una columna distinta de contenido.
Usando Column-Width
Hay otra propiedad además de "recuento de columnas" que puede usar y, según sus necesidades de diseño, puede ser una mejor opción para su sitio. Esto es "ancho de columna". Usando el mismo marcado HTML que se mostró anteriormente, podríamos hacer esto con nuestro CSS:
.contenido {
-moz-column-width: 500px;
-webkit-column-width: 500px;
ancho de columna: 500px;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
espacio entre columnas: 30px;
}
.content div {
pantalla: bloque en línea;
}
La forma en que esto funciona es que el navegador usa este "ancho de columna" como el valor máximo de esa columna. Entonces, si la ventana del navegador tiene menos de 500 píxeles de ancho, estas 3 divisiones aparecerían en una sola columna, una encima de la otra. Este es un diseño típico que se utiliza para diseños de pantallas pequeñas / móviles.
A medida que el ancho del navegador aumenta para ser lo suficientemente grande como para adaptarse a 2 columnas junto con los espacios de columna especificados, el navegador pasará automáticamente de un diseño de una sola columna a dos columnas. Siga aumentando el ancho de la pantalla y, finalmente, obtendrá un diseño de 3 columnas, con cada una de nuestras 3 divisiones mostradas en su propia columna. Nuevamente, esta es una excelente manera de responder, compatible con múltiples dispositivos diseños, y ni siquiera es necesario utilizar preguntas de los medios para cambiar los estilos de diseño!
Otras propiedades de columna
Además de las propiedades que se tratan aquí, también hay propiedades para "regla de columna", incluidos los valores de color, estilo y ancho que le permiten crear reglas entre sus columnas. Estos se usarían en lugar de bordes si desea tener algunas líneas que separen sus columnas.
Es hora de experimentar
Actualmente, el diseño de múltiples columnas CSS está muy bien soportado. Con prefijos, más del 94% de los usuarios de la web podrían ver estos estilos, y ese grupo no admitido en realidad serían versiones mucho más antiguas de Internet Explorer que de todos modos ya no son compatibles.
Con este nivel de soporte ahora implementado, no hay razón para no comenzar a experimentar con columnas CSS e implementar estos estilos en sitios web listos para producción. Puede comenzar sus experimentos utilizando el HTML y CSS que se presentan en este artículo y jugar con diferentes valores para ver cuál funcionaría mejor para las necesidades de diseño de su sitio.