Post Top Ad

Your Ad Spot

martes, 15 de septiembre de 2020

Diseño de varias columnas con CSS

 

Una técnica familiar de los periódicos y revistas es dividir áreas de texto más largas en dos o más columnas. La razón de esto es que el texto se extiende bastante a lo largo de un área determinada, y a veces puede hacer que las personas pierdan la noción de dónde está la siguiente línea. Con el módulo de diseño de múltiples columnas CSS, los profesionales de la Web ahora también pueden aplicar un diseño de columna a un área de texto usando solo un poco de estilo CSS. Los diseños de múltiples columnas en CSS también responden automáticamente, por lo que a menudo puede terminar con dos o tres columnas en una computadora portátil o tableta, mientras que un dispositivo móvil puede tener solo una columna.


Agregar un efecto de columna a un artículo

Primero veamos el marcado que usaremos para comenzar. Consiste en una etiqueta <article> con algunos elementos <h2> y <p> contenidos dentro del <article>.

html

Aquí está el diseño de nuestro artículo, antes de aplicar cualquier efecto de columna.
artículo sin columnas CSS todavía

Ahora hay un par de formas de activar varias columnas en su diseño. Empiece por seleccionar el elemento que le gustaría dividir en columnas, luego aplique la propiedad de column-widthcolumn-countLa column-widthpropiedad simplemente crea tantas columnas como se ajusten al espacio disponible. column-countpor otro lado, simplemente crea el número de columnas que especifique.


ancho de columna

  • Valores: ancho
  • Predeterminado: auto
  • Se aplica a: elementos a nivel de bloque, celdas de tabla y elementos de bloque en línea

recuento de columnas

  • Valores: entero
  • Predeterminado: auto
  • Se aplica a: elementos a nivel de bloque, celdas de tabla y elementos de bloque en línea

Ahora convierta ese artículo en un diseño de tres columnas y hagamos uso de la propiedad column-count para hacerlo. Esta propiedad siempre acepta un número entero que es positivo y no puede ser fraccionario. Entonces, por ejemplo, 1, 2, 3, etc… Los navegadores ajustarán el ancho de cada columna dinámicamente para adaptarse al ancho que permita el dispositivo.

css

ejemplo de recuento de columnas CSS

También agreguemos el fondo azul más claro a la etiqueta <article> para que podamos ver el área exacta que ocupa en la pantalla.
css

css de varias columnas con conjunto de colores de fondo

Nuestra otra opción para activar columnas es ese enfoque de ancho de columna . Primero podemos probar con un valor de digamos 150px y el navegador creará tantas columnas como pueda caber en el elemento <article>. Si hay espacio adicional, los anchos de las columnas se expanden dinámicamente para adaptarse al espacio disponible.

css

ejemplo de ancho de columna CSS

Si reducimos la ventana gráfica, ahora el diseño solo tiene dos columnas, ya que eso es todo lo que cabe. Esta es una buena función de respuesta incorporada del módulo de diseño de múltiples columnas CSS.
css ancho de columna diseño de dos columnas


La columnspropiedad como taquigrafía

También puede especificar columnas en un elemento usando la propiedad de columnas. Lo bueno de la propiedad de las columnas es que puede especificar un recuento como 1 o 2, o puede especificar un ancho como 300px. Cualquiera funcionará. Además, puede especificar tanto el recuento como el ancho al mismo tiempo. Por ejemplo, columnas: 3 200px; Con este enfoque, todas las columnas tendrán un ancho de 200px, pero si el ancho de la ventana gráfica se vuelve realmente amplio, permitiendo digamos 5 o 6 columnas, el hecho de que se hayan especificado 3 establece una cantidad máxima de columnas.

Notación abreviada de columnas CSS

Una ventana gráfica muy amplia todavía muestra solo tres columnas cuando se usan columnas: 3 200px; .
columnas CSS con ventana amplia

Observe si ahora omitimos la cuenta de 3 y usamos columnas: 200px; como regla, ahora tenemos tantas columnas de 200 px de ancho como quepan.
solo se establece el ancho de propiedad de las columnas CSS


Cómo funcionan las columnas CSS

El diseño de múltiples columnas en CSS ahora tiene un nuevo contenedor que existe entre el cuadro de contenido y el contenido y se llama cuadro de columna . Estos cuadros están organizados en un diseño de izquierda a derecha con todos los cuadros de columna en el elemento contenedor que tienen el mismo ancho y alto. La altura se ajusta dinámicamente permitiendo que el texto se distribuya incluso en todas las columnas. En su mayor parte, los cuadros de columna son similares a los elementos de nivel de bloque. Sin embargo, algunas cosas que son diferentes acerca de los cuadros de columna son que no tienen ningún relleno, borde o margen como un elemento de nivel de bloque estándar. Además, cada cuadro de columna no puede tener su propio color de fondo. En diseños de varias columnas, el relleno y los márgenes se aplican al cuadro del elemento contenedor, no a sus columnas.


Controlar el espacio entre columnas

Puede controlar el tamaño del espacio entre columnas mediante la column-gappropiedad. Si desea crear una línea visible entre columnas, la column-rulepropiedad lo respalda. Aquí establecemos el espacio entre columnas en 4em.

ejemplo de espacio de columna CSS

Ahora agreguemos una línea vertical entre columnas usando la propiedad de la regla de columna así.

ejemplo de regla de columna CSS

Nota: La propiedad column-rule es una abreviatura de column-rule-style , column-rule-color y column-rule-width . Todas estas propiedades funcionan igual que las propiedades border- * , por lo que si sabe cómo usar bordes en CSS , puede aplicar las mismas técnicas a las reglas de columna.


Imágenes en diseños CSS de varias columnas

También puede agregar imágenes a su diseño css de varias columnas. Una buena idea es establecer el ancho de cada imagen al 100% y cambiarán de tamaño automáticamente para llenar la columna de borde a borde. Agregaremos una imagen bajo el encabezado Sistema operativo y el encabezado Software de aplicación.

html

diseño css de varias columnas con imágenes

Cambiar a un diseño de dos columnas muestra que las imágenes aún se ven bien y llenan el ancho de cada columna.

CSS diseño de dos columnas con imágenes


Arreglar el margen de la primera columna

Es posible que haya notado que en todos los ejemplos hasta ahora, la primera columna siempre tiene un poco de área de margen antes de que comience el contenido. Todas las columnas restantes terminan teniendo contenido que llega hasta la parte superior de la columna. Para solucionar esto, simplemente podemos aplicar un margen superior 0; a todos los elementos dentro del contenedor de columna. En nuestro caso, eso es <article>.

¡Ahora el contenido se alinea mejor en todas las columnas!
css de varias columnas con la misma altura de contenido

Sugerencia: Nunca establezca explícitamente una altura en el elemento de la columna que lo contiene. Esto puede limitar la cantidad de espacio disponible para distribuir contenido en todas las columnas. Si no hay suficiente espacio, el navegador creará un desbordamiento como columnas de desbordamiento fuera del contenedor de columnas. Esto probablemente hará que también aparezcan barras de desplazamiento y, en general, no funciona tan bien. Así es como se ve esta condición.
no establezca la altura en el elemento de columna


La propiedad de relleno de columna

Si es necesario establecer la altura en el cuadro de la columna por una razón u otra, querrá saber acerca de la propiedad de relleno de columna . Los navegadores intentarán equilibrar el contenido entre columnas automáticamente cambiando el tamaño de la altura del contenedor de columnas. Todos los ejemplos hasta ahora lo han demostrado. Sin embargo, si establece esa altura, puede haber ocasiones en las que no haya suficiente contenido para llenar todas las columnas. En este escenario, puede controlar cómo se equilibra el contenido en las columnas mediante el relleno de columnas. Las tres posibilidades son auto, balance o balance-all. El valor predeterminado es el saldo.

Considere que ahora tenemos una altura de 650px en el contenedor y el relleno de columna está configurado para equilibrar.

Lo que sucede es que la altura total del contenedor se presenta como puede ver por el fondo azul claro. Sin embargo, el contenido se equilibra en las tres columnas, dejando un espacio vacío en la mitad inferior de cada columna.
balance de relleno de columna css

La otra opción es establecer el relleno de columnas en automático. Esto tiene el efecto de llenar cada columna de arriba a abajo por completo antes de pasar a la siguiente columna. Ahora, se presentan las tres columnas, sin embargo, solo hay contenido suficiente para llenar las dos primeras.

relleno de columna CSS automático


Cómo abarcar columnas

Con la propiedad column-span, puede crear algunos efectos realmente interesantes con un elemento dentro del contenedor de la columna. Esencialmente, puede aplicar algo como column-span: all; a un elemento y saldrá del cuadro de columna y se extenderá por todas las columnas. El efecto que esto tiene es crear una especie de divisor horizontal con las columnas superiores relacionadas y las columnas inferiores relacionadas. En el marcado, hemos agregado un nuevo párrafo resaltado a continuación:

Aquí está el CSS para la clase .spancolumns. La mayor parte es para diseñar, pero preste atención a la propiedad de intervalo de columnas.

ejemplo de intervalo de columnas CSS


Diseño de varias columnas con resumen de CSS

En este tutorial, aprendimos todo sobre los diseños de columnas múltiples usando nada más que CSS. El módulo de diseño de múltiples columnas CSS es lo que hace posible este tipo de diseño. Las propiedades a continuación son algunas de las que usamos para demostrar los ejemplos de código anteriores.

  • la columna de recuento Establece el número de columnas de un elemento se debe dividir en
  • columnas Puede usar esto en lugar del recuento de columnas si lo desea
  • relleno de columna Si se establece una altura para un elemento de varias columnas, esto controla cómo el contenido llena las columnas
  • column-gap Establece el ancho del espacio entre columnas
  • column-rule Abreviatura de column-rule-style, column-rule-width y column-rule-color. Establece el estilo de la regla entre columnas.
  • column-span Puede hacer que un elemento abarque todas las columnas con este
  • ancho de columna Puede establecer anchos de columna exactos si lo desea


No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas