Usa el Generador de CSS Grid gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningun servidor.
Para que sirve CSS Grid
CSS Grid es el sistema de diseno para composiciones en dos dimensiones: cualquier cosa ordenada en filas y columnas al mismo tiempo. Disenos de pagina con cabecera, barra lateral, contenido y pie. Galerias de fotos. Rejillas de tarjetas. Paneles de control. Antes de grid, estos disenos se construian con flotantes, tablas o trucos de flexbox que luchaban contra la intencion del disenador. Grid te permite describir el diseno directamente: tantas columnas, tantas filas, este espacio, esta alineacion, y el navegador hace el resto.
La idea central es simple. Un contenedor se convierte en rejilla con display: grid, y sus hijos se convierten en elementos colocados en celdas. Defines las pistas, las columnas y filas, con grid-template-columns y grid-template-rows. La funcion repeat() ahorra repeticion: repeat(3, 1fr) significa tres columnas iguales. La unidad fr es una fraccion del espacio libre, asi que columnas 1fr comparten el contenedor de forma uniforme sin importar su ancho.
Como usar la herramienta
Pon el numero de columnas y filas, el espacio entre celdas y las opciones de alineacion. La vista previa muestra celdas numeradas para que veas la estructura antes de escribir codigo. Cuando el diseno se vea bien, copia el CSS del contenedor y pegalo en tu hoja de estilos. Anade tu propio contenido a los elementos hijos; la rejilla gestiona su colocacion de forma automatica.
Empieza con columnas iguales usando 1fr, que cubre la mayoria de rejillas de tarjetas y galerias. Cambia el espacio para controlar el aire: 12 a 24 pixeles sirve para la mayoria de rejillas de contenido, mientras espacios mas ajustados sirven para galerias de imagenes donde las fotos casi deben tocarse. La alineacion importa menos en rejillas llenas, porque los elementos suelen llenar sus celdas, pero importa mucho cuando los elementos son mas pequenos que sus celdas.
Columnas, filas y la unidad fr
La unidad fr es la mejor idea de grid. A diferencia de los porcentajes, las fracciones tienen en cuenta los espacios de forma automatica: tres columnas 1fr con un espacio de 12 pixeles dividen el espacio que queda despues de los espacios, asi que nada se desborda. Las fracciones mezcladas dan disenos proporcionales sin cuentas: 2fr 1fr hace una columna principal dos veces mas ancha que una barra lateral, y se mantiene proporcional a cualquier ancho de contenedor.
Las pistas fijas tambien tienen su lugar. Una barra lateral que debe quedarse en 240 pixeles debe ser 240px, no una fraccion, y una fila de cabecera que debe quedarse en 64 pixeles debe ser 64px. Mezclar pistas fijas y fraccionarias es normal: 240px 1fr da una barra lateral fija y un area de contenido flexible, que es el diseno de aplicacion mas comun en la web.
Espacio, alineacion y colocacion
Gap reemplaza los viejos trucos de margenes. Un valor de gap pone el espacio de filas y columnas, y el navegador nunca anade un espacio despues de la ultima fila o columna, asi que los bordes quedan alineados. Solo esto quita toda una clase de errores de diseno donde el ultimo elemento de una fila saltaba porque su margen empujaba el total por encima del 100%.
La alineacion en grid funciona en dos niveles. Justify-content y align-content colocan toda la rejilla dentro de su contenedor cuando la rejilla es mas pequena que el contenedor. Justify-items y align-items colocan los elementos dentro de sus celdas. La herramienta expone los controles de nivel de contenedor, que importan mas cuando la rejilla no llena su contenedor, y stretch es el valor por defecto que hace que los elementos llenen sus celdas.
Grid frente a Flexbox
La regla practica es: grid para dos dimensiones, flexbox para una. Si tu diseno necesita control sobre filas y columnas a la vez, grid es la respuesta. Si los elementos fluyen en una sola linea o columna, y solo te importa el espacio a lo largo de esa linea, flexbox es mas simple. Una rejilla de tarjetas es grid; una barra de navegacion es flexbox; una pagina con barra lateral y area de contenido es grid, mientras la navegacion dentro de la cabecera es flexbox.
Rejillas adaptables
Una rejilla que se ve bien en ordenador a menudo necesita menos columnas en un telefono. El enfoque estandar son media queries que cambian el numero de columnas: cuatro columnas en ordenador, dos en tableta, una en telefono. Los valores repeat() y gap se mantienen iguales, asi que el cambio es una linea por punto de corte.
Para rejillas que deben adaptarse sin puntos de corte, auto-fit y minmax son la respuesta: repeat(auto-fit, minmax(240px, 1fr)) crea tantas columnas de minimo 240 pixeles como quepan, y las estira para llenar la fila. Esta sola linea reemplaza varias media queries para rejillas de tarjetas y galerias, y merece aprenderse cuando ya dominas los recuentos fijos de columnas.
Errores comunes
El error mas comun es olvidar que los elementos de rejilla son solo los hijos directos del contenedor. Los elementos anidados no son elementos de rejilla, asi que un div envoltorio alrededor de tus tarjetas rompera el diseno salvo que el envoltorio mismo se convierta en rejilla o aplanes la estructura. Otro error es usar grid para todo, incluida navegacion de una sola fila, donde flexbox necesita menos codigo.