A muchos de nosotros nos toca realizar páginas web y cuando nos tocaba organizar el contenido buscábamos la manera más adecuada y a manera de que el contenido se vea organizado. Pero llegaba el momento en que la información debía estar en columnas para no tener que abultarla tanto.
Una opción es distribuirla en tablas, pero las tablas no son tan buenas hoy en día. Otra opción era crear los divs necesarios para distribuir la información, pero eso requiere del uso del lenguaje CSS para poder lograr mejor distribución y diseño.
Pero no se preocupen para eso llega CSS3 con nuevas opciones y yo les voy a enseñar Como dividir un bloque en columnas con column-count de CSS3, no es nada de magia, ni mucho menos cantidades extremas de código, es tan fácil como agregar unas pocas líneas de código en el CSS y listo.
Ésta es la sintaxis: column-count: número de columnas;
Es importante que sepan que existen las Extensiones Propietarias, las cuales hay que agregar antes de la sintaxis, ya que permite ser renderizado en los motores de los distintos navegadores.
- -webkit- (Chrome, Safari)
- -moz- (FireFox)
- -o- (Opera)
En en Internet Explorer por ahora aun no lo implementa. Y el ejemplo es el siguiente:
/*Convertir un bloque o div en 3 columnas*/
#mibloque{
column-count: 3;
-webkit-column-count: 3;
-moz-column-count: 3;
-o-column-count: 3;
}
Con esto ya estarías viendo tu información repartida en 3 columnas. Pero ¿qué pasa si quieres verla más personalizada?, pues también soporta ese tipo de opciones.
El espacio entre las columnas se crea con column-gap:espacio (en px o em);, y las barras laterales con column:rule: numero_grosor tipo_linea color;. Recuerda no olvidar las extensiones propietarias.
/*Convertir un bloque o div en 3 columnas*/
#mibloque{
column-count: 3;
-webkit-column-count: 3;
-moz-column-count: 3;
-o-column-count: 3;
/*Espacio entre columnas*/
column-gap: 2em;
-webkit-column-gap: 2em;
-moz-column-gap: 2em;
-o-column-gap: 2em;
/*Agrega una barra solida de color*/
column-rule: 2px solid #666;
-webkit-column-rule: 2px solid #666;
-moz-column-rule: 2px solid #666;
-o-column-rule: 2px solid #666;
}
Demasiado fácil, y todo gracias al lenguaje CSS3.
Buenas noches.
No esta nada mal la idea de tu sitio.
Sabes explicar las cosas bien, solo que me parece, que al menos para mi caso, al ver que es una web nueva sobre algo nuevo, lo ideal sería que empieces por el principio, creando documentos sencillos, la cabecera, etc.
No Es mi intención que esto aparezca publicado, simplemente comentarte lo que esperaba ver como primer tutorial.
Desde ya muchas gracias ya que tengo esperado aprender bastante en tu sitio.
Un abrazo desde Uruguay.
Mike.
Excelente comentario, muy buena sugerencia, gracias por tu critica, es lo que espero de mis lectores. Gracias y tomare en cuenta todo lo que dices, Saludos Mike!.
Coincido con Mike, seria mucho mejor ver un ejemplo, y para quienes se inician comentar que estas creando un estilo para una capa, me resulta muy interesante y de echo voy a aplicarlo en un proyecto, gracias por el aporte y a seguir mejorando un saludo
Buena explicación, buena página, pero recomiendo dos cosas: la primera dejar un "ejemplo" al final de cada artículo, para que la gente vea lo que se puede lograr. Y lo segundo es cuidar la ortografía.
Saludos y gracias por los buenos aportes sobre HTML5.
Excelente felicidades muy bien explicado, sigue posteando en la web (y).
Muchas gracias Jose, saludos.
Entre mis locuras que siempre tengo como programador estaba pensando en darle posiciones a las barras solidas y tambien poner unas de una, pero por lo que he leido aún no es posible agregar dos barras a la partición de columnas.
Me encanta esta web la sigo muchisimo
Gracias por la info me esta siendo muy útil. Un saludo!
sabes hacepocos minutos me salvaste la vida en el trabajo
pensaba que hacer eos me iba a tomar bastante jaja
buen aporta
una pregunta no se puede hacer que el column count este 5
pero que si inserto un elemento mas se coloque abajo y se siga acomodando
se puede
saludos?
Buenos dias amigo, muy interesante como se crea las columnas con css… pero quisiera saber si hay alguna forma de poder crear filas sin necesidad de div o table, etc..
¿Las filas para que las necesitas usar? por otra parte, lo que quieras poner, debe estar contenido en algo, y si lo que necesitas son listas, puedes usar <ul> y <li> o los <div>.
Oye sabes como limitar esa funcion paddin: 10%;
column-count para moviles? me explico, ejemplo si alguien lo ve desde un movil que no se haga en columnas si no que se convierta en una sola y si es de una table osea que sea ajustable?
Eso es posible con @media-queries de CSS3, para cada resolución aplica ciertos estilos.
Me sirvio el articulo para aprender mas de css y html muchas gracias
Estamos para apoyarles y compartirles lo que sabemos. 😉
Una duda, el código que pones es todo para el css o está para html y otra parte para css (lo siento, no me queda claro)
Gracias.
Es todo CSS, #mibloque puede ser una etiqueta div, section, article o cualquiera que se comporte como bloque.
¿Existe alguna forma de establecer alto de la columna? Para determinar qué tanto contenido queremos que aparezca en cada una, gracias y muy buen aporte.
Lo defines con el alto del div ó CSS.
Muchas gracias, simple y seguro. Gracias