CSS Grid: Guia Completa para Layouts Modernos

Fundamentos de CSS Grid

CSS Grid es un sistema de layout bidimensional que permite controlar filas y columnas simultaneamente. A diferencia de Flexbox, que trabaja en un solo eje a la vez, Grid permite posicionar elementos en ambos ejes al mismo tiempo, lo que lo hace ideal para layouts de pagina completos.

Un contenedor grid se activa con display grid. Los hijos directos del contenedor se convierten automaticamente en items de grid. La propiedad grid-template-columns define el numero y ancho de las columnas, mientras que grid-template-rows hace lo mismo para las filas.

La unidad fr, exclusiva de Grid, representa una fraccion del espacio disponible. Definir tres columnas con 1fr 2fr 1fr crea una columna central que ocupa el doble de espacio que las laterales, adaptandose automaticamente al ancho del contenedor.

Posicionar elementos en el grid

Cada item de grid puede posicionarse especificando las lineas de inicio y fin. Las propiedades grid-column y grid-row aceptan valores como 1 barra 3, que significa desde la linea 1 hasta la linea 3. Esto permite que un elemento ocupe multiples celdas.

Las areas con nombre ofrecen una forma mas visual de definir layouts. Con grid-template-areas defines un mapa ASCII del layout usando nombres para cada zona, y luego asignas cada elemento a su area con grid-area. El resultado es un codigo que se lee como un diagrama del layout.

La colocacion automatica funciona cuando no especificas posicion. Grid coloca los items en orden, llenando las celdas de izquierda a derecha y de arriba a abajo. La propiedad grid-auto-flow con valor dense permite rellenar huecos cuando items mas grandes dejan espacios vacios.

Grid responsive sin media queries

La funcion repeat con auto-fill o auto-fit crea grids que se adaptan automaticamente al espacio disponible. La combinacion con minmax establece un ancho minimo y maximo para cada columna, y el numero de columnas se ajusta automaticamente.

Auto-fill crea tantas columnas como quepan incluso si no hay suficientes items para llenarlas. Auto-fit colapsa las columnas vacias, permitiendo que los items existentes se expandan. La diferencia importa cuando hay pocos items: auto-fit los estira para llenar el espacio, auto-fill deja las columnas vacias.

Esta tecnica elimina la necesidad de media queries para layouts de cuadricula simples como galerias de imagenes, listas de tarjetas y cuadriculas de productos. El grid se reorganiza fluidamente al cambiar el ancho de la ventana.

Grid versus Flexbox

Grid y Flexbox no son competidores sino complementarios. Grid es superior para layouts de pagina donde necesitas controlar filas y columnas simultaneamente. Flexbox es superior para alinear elementos dentro de un componente a lo largo de un solo eje.

Un patron comun es usar Grid para la estructura general de la pagina, con header, sidebar, main content y footer, y Flexbox dentro de cada seccion para alinear los elementos internos como items de navegacion, botones o tarjetas.

Para layouts unidimensionales como barras de navegacion, listas horizontales y centrado de contenido, Flexbox suele ser mas directo y requiere menos codigo. Para cualquier cosa que necesite alineacion bidimensional, Grid es la opcion natural.

Usar nuestro generador de Grid

Nuestro Generador de CSS Grid ofrece una interfaz visual para disenar layouts de grid sin escribir codigo manualmente. Define filas, columnas, gaps y areas arrastrando controles, y copia el CSS generado cuando el resultado te convenza.

La herramienta es especialmente util para experimentar con la sintaxis de grid-template-areas, que puede ser dificil de visualizar mentalmente al escribirla directamente en codigo.