Durante muchos años, los flotadores CSS han sido un componente fino, pero necesario, en la creación de diseños de sitios web.Si su diseño requería varias 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 diseños de sitios complejos, los flotadores CSS nunca fueron realmente destinados a ser utilizados 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, las nuevas técnicas de diseño, incluidas 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 mucho potencial son las columnas múltiples CSS.
Las columnas CSS han existido durante algunos años, pero la falta de soporte en los navegadores más antiguos (principalmente versiones más 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 esas versiones anteriores de IE, algunos diseñadores web ahora están experimentando con 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 conceptos básicos de las columnas CSS
Como su nombre lo indica, las columnas múltiples CSS (también conocidas como diseño de varias columnas CSS3) le permiten dividir el contenido en un número establecido de columnas. Las propiedades CSS más básicas que usaría son:
Video destacado
- recuento de columnas
- espacio de columna
Para el recuento de columnas, especifique el número de columnas que desea. 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 múltiples columnas 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. Digamos que tiene el siguiente marcado HTML (tenga en cuenta que, por ejemplo, solo hemos iniciado un párrafo, mientras que en la práctica probablemente habría varios párrafos de contenido en este marcado):
& lt; pre / & gt ;
& lt; br & gt ;
El título de tu artículo
& lt; br & gt ;
Imagine muchos párrafos de texto aquí…
& lt; br & gt ;
& lt; br & gt ;
Si luego escribió estos estilos CSS:
& lt; pre & gt; .content {& lt; br & gt ;
-moz-column-count: 3; & lt; br & gt ;
-webkit-column-count: 3; & lt; br & gt ;
recuento de columnas: 3; & lt; br & gt ;
-moz-column-gap: 30px; & lt; br & gt ;
-webkit-column-gap: 30px; & lt; br & gt ;
espacio de columna: 30px; & lt; br & gt ;
} & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; & lt; / pre & gt;
Esta regla CSS dividiría el & amp; # x201C; content & amp; # x201D; división 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. Observe que primero utilizamos las propiedades prefijadas por el proveedor, seguidas de las declaraciones no prefijadas.
Tan fácil como 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 de & amp; # x201C; plold & amp; # x201D; de la pantalla.
Los lectores tendrían que desplazarse hacia arriba y hacia abajo para leer el contenido completo. Aún así, el director 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 y amp; # x2014; de hecho, se puede usar para el diseño.
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 de sitio web muy común, y para lograr esas 3 columnas, normalmente flotaría las divisiones que están dentro. Con las columnas múltiples CSS, es mucho más fácil.
Aquí hay alguna muestra HTML:
& lt; pre / & gt ;
& lt; br & gt ;
& lt; br & gt ;
De nuestro blog
& lt; br & gt ;
El contenido iría aquí & amp; # x2026;
& lt; br & gt ;
& lt; br & gt ;
& lt; br & gt ;
Próximos eventos
& lt; br & gt ;
El contenido iría aquí & amp; # x2026;
& lt; br & gt ;
& lt; br & gt ;
& lt; br & gt ;
El CSS para hacer estas múltiples columnas comienza con lo que vio anteriormente:
& lt; pre & gt; .content {& lt; br & gt ;
-moz-column-count: 3; & lt; br & gt ;
-webkit-column-count: 3; & lt; br & gt ;
recuento de columnas: 3; & lt; br & gt ;
-moz-column-gap: 30px; & lt; br & gt ;
-webkit-column-gap: 30px; & lt; br & gt ;
espacio de columna: 30px; & lt; br & gt ;
} & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; & lt; / pre & gt;
Ahora, El desafío aquí es que el navegador quiere dividir este contenido de manera uniforme, entonces, si la longitud del contenido de estas divisiones es diferente, ese navegador realmente dividirá el contenido de una división individual, agregando el inicio a una columna y luego continuando a 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, no importa cuán grande o pequeña sea una división individual y el contenido de # x2019; s, nunca querrá que se divida. Puede lograr esto agregando esta línea adicional de CSS:
& lt; pre & gt; .content div {& lt; br & gt ;
visualización: bloque en línea; & lt; br & gt ;
} & lt; / br & gt; & lt; / br & gt; & lt; / pre & gt ;
Esto obligará a aquellas divisiones que están dentro del & amp; # x201C; content & amp; # x201D; permanecer intacto incluso cuando el navegador divide esto en múltiples columnas. Aún mejor, dado que no le dimos a nada aquí un ancho fijo, estas columnas cambiarán el tamaño automáticamente a medida que el navegador cambie el tamaño, lo que las convierte en una aplicación ideal para sitios web receptivos.& amp; amp; nbsp; con eso & amp; # x201C; enline-block & amp; # x201D; estilo en su lugar, cada una de sus 3 divisiones será una columna de contenido distinta.
Usando Column-Width
Hay otra propiedad además de & amp; # x201C; column-count & amp; # x201D; que puede usar, y dependiendo de sus necesidades de diseño, en realidad puede ser una mejor opción para su sitio. Esto es & amp; # x201C; column-width & amp; # x201D ;.& amp; amp; nbsp; Usando el mismo marcado HTML que se mostró anteriormente, podríamos hacer esto con nuestro CSS:
& lt; pre & gt; .content {& lt; br & gt ;
-moz-columna-width: 500px; & lt; br & gt ;
-webkit-column-width: 500px; & lt; br & gt ;
ancho de columna: 500px; & lt; br & gt ;
-moz-column-gap: 30px; & lt; br & gt ;
-webkit-column-gap: 30px; & lt; br & gt ;
espacio de columna: 30px; & lt; br & gt ;
} & lt; br & gt ;
.content div {& lt; br & gt ;
visualización: bloque en línea; & lt; br & gt ;
} & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt;
La forma en que esto funciona es que el navegador usa este & amp; # x201C; column-width & amp; # x201D; 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 otra. Este es un diseño típico utilizado para diseños de pantalla móvil / pequeña.
A medida que el ancho del navegador aumenta para ser lo suficientemente grande como para caber 2 columnas junto con los espacios de columna especificados, el navegador pasará automáticamente de un diseño de 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. Una vez más, esta es una excelente manera de obtener algunos diseños receptivos y amigables para múltiples dispositivos, y usted no necesita # x2019; ni siquiera necesita usar consultas de medios para cambiar los estilos de diseño!
Otras propiedades de columna
Además de las propiedades cubiertas aquí, también hay propiedades para & amp; # x201C; column-rule & amp; # x201D ;, que incluyen 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.
Tiempo para experimentar
Actualmente, el diseño de columna múltiple CSS es muy compatible. Con los prefijos, más del 94% de los usuarios web podrían ver estos estilos, y ese grupo no compatible realmente sería versiones mucho más antiguas de Internet Explorer que de todos modos ya no son compatibles.
Con este nivel de soporte ahora en su lugar, no hay razón para no comenzar a experimentar con las columnas CSS e implementar estos estilos en sitios web listos para la producción. Puede comenzar sus experimentos utilizando el HTML y el CSS presentados en este artículo y jugar con diferentes valores para ver qué funcionaría mejor para sus necesidades de diseño de sitio y amp; # x2019; s.
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& amp; # x203A; Informática
