Usa el Constructor de Rejillas de Diseño gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningún servidor.
Qué hace realmente una rejilla de diseño
Toda página de aspecto limpio que admiras se apoya en una rejilla, se vea o no. Una rejilla es un conjunto de columnas, espacios y márgenes invisibles que decide dónde pueden situarse el texto, las imágenes y los botones. Cuando los elementos se alinean con las mismas columnas, la página se siente tranquila e intencionada. Cuando cada elemento empieza en una posición horizontal ligeramente distinta, la página se siente desordenada, aunque el visitante no sepa explicar por qué.
El Constructor de Rejillas de Diseño de arriba hace visible esa estructura invisible. Ajustas el número de columnas, el espacio entre ellas, los márgenes de la página y el ancho de la página, y la vista previa se actualiza en vivo. Debajo de la vista previa obtienes el ancho exacto de columna y un fragmento CSS que puedes copiar en tu proyecto. Es una herramienta de planificación, no un constructor de páginas: responde a la pregunta «¿qué rejilla debe usar este diseño?» antes de escribir ningún código de maquetación.
Cómo planificar una rejilla
Empieza por el ancho de la página. Un ancho de contenido habitual para escritorio está entre 960 y 1200 píxeles. Las páginas más anchas sirven para diseños con muchas imágenes, y las más estrechas para textos largos de lectura, porque las líneas de más de unos 75 caracteres cansan la vista. Ajusta eso primero, porque el ancho de columna depende de ello.
Después, elige el número de columnas. Doce columnas es la opción clásica para el diseño web, porque doce se divide de forma exacta entre dos, tres, cuatro y seis, lo que ofrece diseños flexibles con la misma rejilla. Seis columnas es más simple y a menudo basta para una página básica. Cuatro columnas sirve para una composición compacta, y dos columnas para un artículo simple con barra lateral.
Luego ajusta el espacio. El espacio, también llamado medianil, es la separación entre columnas. Un espacio de 16 a 24 píxeles es un valor seguro por defecto para la mayoría de pantallas. Los espacios menores se sienten densos y editoriales, y los mayores se sienten amplios y premium. Por último, ajusta los márgenes, el espacio entre la rejilla y el borde de la página. Unos márgenes de 24 píxeles o más evitan que el contenido se sienta apretado contra el borde de la pantalla en ventanas más pequeñas.
Lee el resultado del ancho de columna. Si baja de unos 60 píxeles, tus columnas de texto serán demasiado estrechas para una lectura cómoda, así que reduce el número de columnas o aumenta el ancho de la página. Si sube de 200 píxeles, quizá tengas muy pocas columnas para una composición rica.
Patrones de rejilla habituales
Un blog suele usar una columna principal amplia que ocupa ocho de doce columnas y una barra lateral que ocupa cuatro. Una página de producto puede usar una zona de imágenes de seis columnas y una zona de detalles de seis. Una galería suele usar cuatro columnas iguales, cada una de tres de doce. Un panel de control puede usar una columna de navegación estrecha y una zona de contenido amplia. Todos son la misma rejilla con distintas extensiones, y por eso planificar primero la rejilla mantiene coherente todo un sitio.
La coherencia es el verdadero beneficio. Cuando todas las páginas comparten una rejilla, los visitantes aprenden dónde mirar, y las páginas nuevas exigen menos esfuerzo de diseño porque la estructura ya existe. Los equipos también discuten menos sobre alineación cuando la rejilla resuelve la cuestión de antemano.
Rejillas en pantallas pequeñas
Las rejillas cambian con el tamaño de pantalla. Una rejilla de doce columnas de escritorio suele reducirse a cuatro columnas en una tableta y a dos en un móvil, con espacios y márgenes menores. Planifica esos puntos de cambio desde el principio: decide qué columnas se apilan y cuáles se fusionan, en vez de dejar que los elementos se aprieten. Las columnas de texto nunca deben encogerse por debajo de un ancho legible solo para conservar una composición de escritorio. En un móvil, una sola columna con márgenes generosos supera siempre a una composición multicolumna apretada.
Preguntas frecuentes
¿Cuántas columnas debo usar? Doce para composiciones web flexibles, seis para páginas más simples, cuatro para diseños compactos. Más columnas dan más opciones de composición, pero también más decisiones.
¿Cuál es la diferencia entre espacio y margen? El espacio es la separación entre columnas dentro de la composición. El margen es la separación entre las columnas exteriores y el borde de la página. Ambos importan, y ambos se muestran en esta herramienta.
¿Puedo usar el código CSS directamente? Sí. El fragmento usa CSS grid estándar, que funciona en todos los navegadores modernos, y puedes ajustar los valores para que coincidan con tu sistema de diseño.
Herramientas relacionadas
- Layout Grid Builder (English version)
- Vista Previa con Rejilla Superpuesta
- Vista Previa de Tamaños Adaptables