Durante muchos años, los flotadores de CSS han sido un componente delicado, pero necesario, para crear diseños de sitios web. Si su diseño requería múltiples columnas, se convirtió en 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 diseños de sitios complejos, los flotadores de CSS nunca fueron realmente diseñados para ser utilizados de esta manera.
Si bien los flotadores y el posicionamiento de CSS seguramente tendrán un lugar en el diseño web durante muchos años, las técnicas de diseño más nuevas, como CSS Grid y Flexbox, están brindando a los diseñadores web nuevas formas de crear diseños de sitios. Otra nueva técnica de diseño que muestra mucho potencial es CSS Columnas Múltiples.
Las Columnas CSS han existido desde hace algunos años, pero la falta de soporte en los navegadores más antiguos (principalmente las versiones más antiguas de Internet Explorer) ha evitado 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 ahora están experimentando con las nuevas opciones de diseño CSS, incluidas las Columnas CSS, y descubren que tienen mucho más control con estos nuevos enfoques que con los flotadores.
Los fundamentos de las columnas CSS
Como su nombre lo sugiere, CSS Multiple Columns (también conocido como diseño de varias columnas CSS3) 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 desea. El espacio entre columnas sería 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 varias columnas de CSS en la práctica sería dividir un bloque de contenido de texto en varias columnas, similar a lo que vería en un artículo de periódico. Supongamos que tiene el siguiente código HTML (tenga en cuenta que, por ejemplo, solo estoy poniendo el comienzo de un párrafo, mientras que en la práctica es probable que haya varios párrafos de contenido en este formato):
Si luego escribiste estos estilos CSS:
.content {-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 de 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 primero utilizamos las propiedades prefijadas por el proveedor, seguidas por 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 puede que esta no sea 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 las Columnas CSS es tan fácil como se ve aquí, y se puede usar para hacer mucho más que simplemente dividir el contenido de algunos párrafos; de hecho, se puede usar para el diseño.
Diseño Con Columnas CSS
Digamos que tienes una página web con un área de contenido que tiene 3 columnas de contenido. Este es un diseño de sitio web muy típico, y para lograr esas 3 columnas, normalmente flotarían las divisiones en las que se encuentran. Con las columnas múltiples de CSS, es mucho más fácil.
Aquí hay algunos ejemplos de HTML:
