> Faqs > ¿Cuál es la mejor alternativa para construir un layout por columnas con CSS?

¿Cuál es la mejor alternativa para construir un layout por columnas con CSS?

De entre todas las alternativas posibles actualmente ¿Cuál sería la más recomendada para construir un layout por columnas?

Es decir, dividir en dos columnas el contenido de una página. Por supuesto que sea adaptable o responsive.

Respuestas

Existen numersos mecanismos para construir layouts en páginas web, cada uno de ellos con ventajas e inconvenientes. Los voy a enumerar y explicaré brevemente las claves de cada uno.

CSS Grid: El más avanzado de todos los mecanismos para conseguir layouts tan complejos como queramos, donde se pueden posicionar los elementos a total libertad. No importa en qué posición del código HTML aparezcan, nosotros los podemos mover a la columna o fila que queramos. Display grid produce una rejilla perfectamente configurable, que es la manera más avanzada de maquetar. La parte mala es que su compatibilidad con navegadores es la peor. No obstante, si no nos preocupa Internet Explorer, podemos usarla sin problema alguno.

CSS Flexbox: Flexbox no está pensado para construir layouts o rejillas, como sí lo está CSS Grid, pero nos puede facilitar mucho las cosas para conseguirlo, en comparación con otros mecanismos de CSS. Flexbox permite definir con flexibilidad cómo se van a colocar los elementos en el contenedor, permitiendo que sea en columnas o filas, de izquierda a derecha, arriba a abajo, o al revés. Permite alineación en vertical, que es algo que hasta Flexbox no era posible. Flexbox hoy creo que es la solución más estándar para creación de Layouts, aunque no esté pensado para ello, porque su compatibilidad comienza en Internet Explorer 10, así como está disponible en cualquier navegador móvil.

Display table: No llegó a ser muy utilizado, pero durante un tiempo los diseñadores recurrieron a él. Permite hacer que elementos de cualquier tipo, como un <div>, se comporten como si fueran tablas, a las que les podemos poner contenido en forma de celdas. Ojo, no nos referimos a tablas, sino a elementos comunes del HTML, a los que les cambiamos el display. Es complicado de usar y no solucionabla todos los problemas de rigidez y falta de versatilidad de soluciones anteriores. No lo recomendaría.

Float: Antes de que existiera Flexbox, el mecanismo más popular era crear un contenedor que tuviera las columnas con float: right y float: left. Así cada cosa se iba al lugar donde tocaba. Sin embargo, este tipo de composición de layouts era difícilmente controlable por ser más rígido y causar ciertos problemas a la hora de hacer márgenes en la parte de abajo de los elementos, o a la hora de usar fondos. Sin embargo, en la época de Internet Explorer 8 era lo que había. Tampoco sería recomendable, porque Flexbox ofrece infinitas ventajas y hoy todos los navegadores lo implementan correctamente.

tablas: Fue el primer mecanismo para la creación de layouts. Es tremendamente rígido y no permite la separación del código por responsabilidades, ya que el propio HTML define dónde van a quedar colocadas las columnas y su contenido, en lugar de hacerlo el CSS como debería. Fue muy popular en Internet a principio de siglo y finales del siglo pasado. Afortunadamente pasó a la historia.

En resumen. Lo mejor es usar CSS Grid Layout. Si te preocupa la compatibilidad, usa Flexbox. Es muy raro que necesites usar algo más antiguo, puesto que hoy no hay usuarios de navegadores que no soporten Flexbox.

Alberto
580 14 40 18