Múltiples columnas con CSS3

- Andrés Cruz

Múltiples columnas con CSS3

Con la propiedad Multi-column de CSS3 podemos dividir nuestro párrafos en columnas; utilizando algunos atributos:

  • column-width: Con esta propiedad podemos indicar el ancho de las columnas.
  • column-gap: Con esta propiedad podemos indicar el espacio entre cada columna.
  • column-rule: Con esta propiedad podemos dibujar una línea divisoria o borde entre la columnas.
  • column-count: Con esta propiedad podemos indicar cuantas columnas deseamos crear.

Básicamente tenemos dos maneras de dividir nuestras párrafos en columnas; definiendo el número de columnas con la propiedad column-count, o definiendo el ancho de cada una con la propiedad column-width.

Dividiendo los párrafos en columnas utilizando la propiedad column-count

CSS

div.ejemplo1{
-webkit-column-count:2; 
-moz-column-count:2; 
}

HTML

<div class="ejemplo1">
    <p>La Luna es el único satélite natural de la Tierra. Con un diámetro de 3476 km es el quinto satélite más grande del Sistema Solar, mientras que en cuanto al tamaño proporcional respecto de su planeta es el satélite más grande: un cuarto del diámetro de la Tierra y 1/81 de su masa. Después de Ío, es además el segundo satélite más denso. Se encuentra en relación síncrona con la Tierra, siempre mostrando la misma cara hacia el planeta. El hemisferio visible está marcado con oscuros mares lunares de origen volcánico entre las brillantes montañas antiguas y los destacados astroblemas.</p>
    <p>La Luna es el único cuerpo celeste en el que el ser humano ha realizado un descenso tripulado. Aunque el programa Luna de la Unión Soviética fue el primero en alcanzar la Luna con una nave espacial no tripulada, el programa Apolo de Estados Unidos consiguió las únicas misiones tripuladas hasta la fecha, comenzando con la primera órbita lunar tripulada por el Apolo 8 en 1968, y seis alunizajes tripulados entre 1969 y 1972, siendo el primero el Apolo 11 en 1969. Estas misiones regresaron con más de 380 kg de roca lunar, que han permitido alcanzar una detallada comprensión geológica de los orígenes de la Luna (se cree que se formó hace 4500 millones de años después de un gran impacto), la formación de su estructura interna y su posterior historia.</p>
</div>

Resultado

La Luna es el único satélite natural de la Tierra. Con un diámetro de 3476 km es el quinto satélite más grande del Sistema Solar, mientras que en cuanto al tamaño proporcional respecto de su planeta es el satélite más grande: un cuarto del diámetro de la Tierra y 1/81 de su masa. Después de Ío, es además el segundo satélite más denso. Se encuentra en relación síncrona con la Tierra, siempre mostrando la misma cara hacia el planeta. El hemisferio visible está marcado con oscuros mares lunares de origen volcánico entre las brillantes montañas antiguas y los destacados astroblemas.

La Luna es el único cuerpo celeste en el que el ser humano ha realizado un descenso tripulado. Aunque el programa Luna de la Unión Soviética fue el primero en alcanzar la Luna con una nave espacial no tripulada, el programa Apolo de Estados Unidos consiguió las únicas misiones tripuladas hasta la fecha, comenzando con la primera órbita lunar tripulada por el Apolo 8 en 1968, y seis alunizajes tripulados entre 1969 y 1972, siendo el primero el Apolo 11 en 1969. Estas misiones regresaron con más de 380 kg de roca lunar, que han permitido alcanzar una detallada comprensión geológica de los orígenes de la Luna (se cree que se formó hace 4500 millones de años después de un gran impacto), la formación de su estructura interna y su posterior historia.

Dividiendo los párrafos en columnas utilizando la propiedad column-width

CSS

div.ejemplo2{
-webkit-column-width:300px; 
-moz-column-width:300px; 

HTML

<div class="ejemplo2">
    <p>La Luna es el único satélite natural de la Tierra. Con un diámetro de 3476 km es el quinto satélite más grande del Sistema Solar, mientras que en cuanto al tamaño proporcional respecto de su planeta es el satélite más grande: un cuarto del diámetro de la Tierra y 1/81 de su masa. Después de Ío, es además el segundo satélite más denso. Se encuentra en relación síncrona con la Tierra, siempre mostrando la misma cara hacia el planeta. El hemisferio visible está marcado con oscuros mares lunares de origen volcánico entre las brillantes montañas antiguas y los destacados astroblemas.</p>
    <p>La Luna es el único cuerpo celeste en el que el ser humano ha realizado un descenso tripulado. Aunque el programa Luna de la Unión Soviética fue el primero en alcanzar la Luna con una nave espacial no tripulada, el programa Apolo de Estados Unidos consiguió las únicas misiones tripuladas hasta la fecha, comenzando con la primera órbita lunar tripulada por el Apolo 8 en 1968, y seis alunizajes tripulados entre 1969 y 1972, siendo el primero el Apolo 11 en 1969. Estas misiones regresaron con más de 380 kg de roca lunar, que han permitido alcanzar una detallada comprensión geológica de los orígenes de la Luna (se cree que se formó hace 4500 millones de años después de un gran impacto), la formación de su estructura interna y su posterior historia.</p>
</div>

Resultado

La Luna es el único satélite natural de la Tierra. Con un diámetro de 3476 km es el quinto satélite más grande del Sistema Solar, mientras que en cuanto al tamaño proporcional respecto de su planeta es el satélite más grande: un cuarto del diámetro de la Tierra y 1/81 de su masa. Después de Ío, es además el segundo satélite más denso. Se encuentra en relación síncrona con la Tierra, siempre mostrando la misma cara hacia el planeta. El hemisferio visible está marcado con oscuros mares lunares de origen volcánico entre las brillantes montañas antiguas y los destacados astroblemas.

La Luna es el único cuerpo celeste en el que el ser humano ha realizado un descenso tripulado. Aunque el programa Luna de la Unión Soviética fue el primero en alcanzar la Luna con una nave espacial no tripulada, el programa Apolo de Estados Unidos consiguió las únicas misiones tripuladas hasta la fecha, comenzando con la primera órbita lunar tripulada por el Apolo 8 en 1968, y seis alunizajes tripulados entre 1969 y 1972, siendo el primero el Apolo 11 en 1969. Estas misiones regresaron con más de 380 kg de roca lunar, que han permitido alcanzar una detallada comprensión geológica de los orígenes de la Luna (se cree que se formó hace 4500 millones de años después de un gran impacto), la formación de su estructura interna y su posterior historia.

En ambos casos podemos utilizar las otras propiedades.

CSS

div.ejemplo3{
-webkit-column-width:300px;
-webkit-column-gap: 20px;
-webkit-column-rule: 1px solid black;
-moz-column-width:300px; 
-moz-column-gap: 20px;
-moz-column-rule: 1px solid black;
}

HTML

<div class="ejemplo3">
    <p>La Luna es el único satélite natural de la Tierra. Con un diámetro de 3476 km es el quinto satélite más grande del Sistema Solar, mientras que en cuanto al tamaño proporcional respecto de su planeta es el satélite más grande: un cuarto del diámetro de la Tierra y 1/81 de su masa. Después de Ío, es además el segundo satélite más denso. Se encuentra en relación síncrona con la Tierra, siempre mostrando la misma cara hacia el planeta. El hemisferio visible está marcado con oscuros mares lunares de origen volcánico entre las brillantes montañas antiguas y los destacados astroblemas.</p>
    <p>La Luna es el único cuerpo celeste en el que el ser humano ha realizado un descenso tripulado. Aunque el programa Luna de la Unión Soviética fue el primero en alcanzar la Luna con una nave espacial no tripulada, el programa Apolo de Estados Unidos consiguió las únicas misiones tripuladas hasta la fecha, comenzando con la primera órbita lunar tripulada por el Apolo 8 en 1968, y seis alunizajes tripulados entre 1969 y 1972, siendo el primero el Apolo 11 en 1969. Estas misiones regresaron con más de 380 kg de roca lunar, que han permitido alcanzar una detallada comprensión geológica de los orígenes de la Luna (se cree que se formó hace 4500 millones de años después de un gran impacto), la formación de su estructura interna y su posterior historia.</p>
</div>

Resultado

La Luna es el único satélite natural de la Tierra. Con un diámetro de 3476 km es el quinto satélite más grande del Sistema Solar, mientras que en cuanto al tamaño proporcional respecto de su planeta es el satélite más grande: un cuarto del diámetro de la Tierra y 1/81 de su masa. Después de Ío, es además el segundo satélite más denso. Se encuentra en relación síncrona con la Tierra, siempre mostrando la misma cara hacia el planeta. El hemisferio visible está marcado con oscuros mares lunares de origen volcánico entre las brillantes montañas antiguas y los destacados astroblemas.

La Luna es el único cuerpo celeste en el que el ser humano ha realizado un descenso tripulado. Aunque el programa Luna de la Unión Soviética fue el primero en alcanzar la Luna con una nave espacial no tripulada, el programa Apolo de Estados Unidos consiguió las únicas misiones tripuladas hasta la fecha, comenzando con la primera órbita lunar tripulada por el Apolo 8 en 1968, y seis alunizajes tripulados entre 1969 y 1972, siendo el primero el Apolo 11 en 1969. Estas misiones regresaron con más de 380 kg de roca lunar, que han permitido alcanzar una detallada comprensión geológica de los orígenes de la Luna (se cree que se formó hace 4500 millones de años después de un gran impacto), la formación de su estructura interna y su posterior historia.

Conclusiones

Con este tutorial podemos ver lo sencillo que resulta dividir nuestros textos en columnas sin la necesidad de utilizar otras estructuras adicionales en HTML, como las tablas.

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy

Acepto recibir anuncios de interes sobre este Blog.