CSS Grid Layout

> Temas > CSS Grid Layout
Editar

Es un estándar de CSS que nos permite disponer elementos en la página por medio de una rejilla. Gracias a CSS Grid Layout podemos conseguir cualquier distribución de los elementos en filas y columnas totalmente configurables.

CSS Grid Layout es la respuesta a una de las demandas históricas más frecuentes de los diseñadores web: un sistema que permita maquetar cualquier tipo de contenido en una estructura de rejilla, con filas y columnas.

Es un estándar que ha aparecido en CSS ya hace unos años y que se encuentra disponible en todos los navegadores.

Básicamente nos permite conseguir todo tipo de distribuciones de los contenidos, con una rejilla adaptable a cualquier situación y tamaños de pantalla.

Más información:

CSS Grid Layout vs HTML Tablas

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.

Editar

¿Quieres añadir algo sobre CSS Grid Layout?

Crea artículos, recursos o comparte información sobre CSS Grid Layout

Crear un bloque

CSS Grid Layout

Manuales

Manual de CSS Grid Layout

Manual de CSS Grid Layout

Este manual aborda la especificación de CSS Grid Layout, con numerosos ejemplos para poder maquetar páginas o diagramas con la rejilla estándar que nos proporciona CSS.

Temas relacionados

Preguntas y respuestas de CSS Grid Layout

Se han recibido 2 faqs en CSS Grid Layout

Hacer una pregunta