CSS Grid Layout

Por supuesto, podríamos hacer una rejilla con tablas, pero nos encontraríamos más o menos en la situación indeseable que teníamos en la época de la maquetación con tablas.

Las tablas de HTML es para presentar información tabulada, como una página de de planes y precios, una tabla de clasificación de una competición, etc. Todo eso lo puedes maquetar con tablas y sería perfectamente válido desde un punto de vista conceptual y de la semántica del HTML, porque es información tabulada.

Sin embargo, el problema de las tablas es:

• Tiene mucha rigidez, no somos capaces de cambiar la disposición de los elementos en pantallas pequeñas
• Cuando colocas una casilla lo haces en una fila y luego esa casilla no la puedes mover
• Cuando colocas una fila detrás de otra, estas filas no las puedes mover.

En fin, que la versatilidad de las tablas para ajustar la disposición de los elementos mediante CSS es prácticamente nula. Sin embargo, con CSS Grid Layout tenemos libertaad para hacer cualquier cosa que necesitemos.

• Mostrar los elementos como una tabla o como un simple listado, permitiendo que la disposición cambie por temas como el tamaño de la pantalla o las preferencias del usuario.
• Ordenar y reordenar completamente tanto filas, columnas o ambas cosas, con una libertad absoluta
• Permitir aplicar toda una serie de nuevos atributos que hacen que las celdas de la rejilla se puedan adaptar a muchas situaciones, como alineación entre ellas.
• Disponer los elementos de manera dinámica y automática basados en diversos factores

En fin, que merece mucho la pena dedicarse un tiempo a conocer CSS Grid Layout, no solo como una herramienta excelente para la maquetación, sino incluso para mejorar la adaptabilidad de los datos que queremos presentar tabulados.