¿Cuándo usa columnas CSS? Inteligencia de datos PlatoBlockchain. Búsqueda vertical. Ai.

¿Cuándo usa columnas CSS?

Eso no es retórico: estoy realmente interesado en encontrar excelentes casos de uso para los diseños de varias columnas de CSS.

La respuesta parece sencilla. Usa columnas cuando quieras dividir cualquier contenido en columnas, ¿verdad? En general, este es el tipo de ejemplo que encontrará en los artículos que muestran cómo funcionan los diseños de varias columnas de CSS, incluido el nuestro. Almanaque:

Tocar el asunto exacto. Pero, ¿es este un caso de uso real? Mmmm tal vez. Si el texto es relativamente breve, quizás sea un buen toque. Así me lo vendí a mí mismo al rediseñar mi sitio web un hace pocos años. Hoy no es así, pero así era entonces:

¿Cuándo usa columnas CSS?

¿Pero un artículo completo de formato largo dividido en columnas? Me encanta en los periódicos, pero dudo en desplazarme hacia abajo en una página web para leer una columna, solo para desplazarme hacia arriba para volver a hacerlo.

Supongo que podemos usarlo para colocar dos elementos uno al lado del otro, pero flexbox es mucho más adecuado para eso. Además, una limitación nos impide seleccionar las columnas para dimensionarlas individualmente. Las columnas deben tener el mismo ancho.

Una cosa que las columnas tienen a su favor es que son el único método de diseño CSS que fragmentos contenido. (Es decir, a menos que estemos contando Regiones CSS... ¡¿qué pasó con eso, de todos modos?!) Entonces, si quieres dividir un párrafo en columnas, ya es posible sin envoltorios adicionales.

¿Cuándo más podría necesitar dividir un bloque continuo de contenido en columnas? Recuerdo que necesitaba hacer eso cuando tenía una gran lista desordenada de artículos. Me gusta la forma en que las listas pueden hacer que el contenido sea fácil de escanear, pero las listas largas pueden hacer que un lado de la página se vea muy pesado. Digamos, por ejemplo, que estábamos enumerando todas las etiquetas de publicaciones para CSS-Tricks en grupos alfabéticos. Un diseño de varias columnas funciona muy bien para eso:

Continúe e intente cambiar el tamaño del ancho de la ventana gráfica. Se definen tres columnas, pero el número cambiará según la cantidad de espacio disponible. ¡Tengo que amar toda esa bondad receptiva sin el trabajo de consulta de medios!

Estaba trabajando en una demostración para el :left pseudo-clase y alcanzó columns porque es una excelente manera de fragmentar cosas para imprimir demostraciones. Entonces, supongo que hay otro caso de uso. Y mientras hacía una demostración, me di cuenta de que se podía usar un diseño de varias columnas para crear una cuadrícula de elementos de mampostería, como una galería de imágenes:

¿Pero qué más? ¿Estamos limitados a párrafos cortos, listas largas y cuadrículas que fluyen libremente?

Sello de tiempo:

Mas de Trucos CSS