Composición
Grilla
Líneas invisibles que ordenan.
La grilla en diseño es un esqueleto de columnas que no se ve en la pieza final. Te dice dónde puede ir cada cosa para que todo se sienta equilibrado.
3 demos interactivas
Guía gratis por DM
Composición
Mira el reel · 1 min
01
Qué es
Una grilla en diseño es un esqueleto de columnas que no se ve en el resultado final. Te dice dónde puede empezar y terminar cada elemento.
Textos, imágenes y botones se apoyan en las mismas líneas. Por eso todo se siente equilibrado y profesional, aunque nadie vea la grilla.
02
Pruébalo
Mira cómo aparecen las columnas y cada elemento se acomoda en ellas. Apaga las columnas: el orden se queda.
10 a.m.
Cada cosa en su lugar
La regla de oro
Cada elemento empieza y termina en una línea de la grilla. Nada flota.
03
Así no / así sí
Desordenado.
La foto, el titular, el texto y el botón empiezan cada uno en un lugar distinto. Se ve improvisado aunque el contenido sea bueno.
Ordenado.
Mismos elementos, apoyados en 4 columnas. Cada uno ocupa 1, 2, 3 o 4 columnas completas y comparte bordes con los demás.
04
Las partes de una grilla
Cambia de formato y mira cuántas columnas, qué medianil y qué margen usar en cada uno.
- Columnas
- 4
- Medianil
- 20–30 px
- Margen
- 60–90 px
- 1Margen. El espacio libre entre el borde y el contenido. Nada lo cruza.
- 2Columna. La franja donde apoyas textos e imágenes. Cada elemento ocupa columnas completas.
- 3Medianil. El espacio entre columnas. Siempre mide lo mismo.
05
Cómo aplicarlo hoy
1
Márgenes primero
Antes de poner nada, decide el espacio libre de los bordes. Igual a ambos lados.
2
Elige las columnas
4 para redes y celular, 12 para web. Más columnas no es mejor: es más difícil.
3
Activa las guías
Figma, Canva, Illustrator y Photoshop te dejan crear columnas. Hazlo antes de diseñar, no al final.
4
Encaja todo
Cada texto, foto y botón empieza en el borde de una columna y termina en otro.
06
Antes de publicar
- ¿Los márgenes miden lo mismo a cada lado?
- ¿Cada elemento arranca en una columna?
- ¿El espacio entre columnas es siempre igual?
- ¿Se ve ordenado cuando apagas la grilla?
COMENTA
“GRILLA”
y te envío
la guía
por DM
La guía de grilla en PDF: seis páginas con ejemplos, reglas y la lista para revisar antes de publicar. Comenta la palabra en el reel de Instagram y te llega por mensaje directo.
Preguntas
frecuentes
¿Qué es una grilla en diseño gráfico?
Es una estructura de columnas, márgenes y medianiles que sirve de guía para ubicar los elementos. No se ve en el diseño final, pero hace que todo se vea ordenado.
¿Por qué se usan 12 columnas en diseño web?
Porque 12 se divide en 2, 3, 4 y 6. Con una sola grilla puedes armar mitades, tercios y cuartos sin cambiar de sistema.
¿Qué es el medianil en una grilla?
Es el espacio entre dos columnas. Siempre mide lo mismo y evita que los elementos de columnas vecinas se peguen.
Sigue aprendiendo
