Introduce el ancho del contenedor, el número de columnas deseado, el espacio entre columnas y el margen exterior. La herramienta calcula el ancho de cada columna y genera el código CSS Grid correspondiente.
Introduce un ancho de contenedor positivo, al menos una columna, y una separación y margen de cero o más.
Copiado al portapapeles.
Por qué usar un sistema de rejilla en diseño web
Un sistema de rejilla divide una página en un número fijo de columnas separadas por espacios regulares y alinea cada elemento con esa estructura. Esto da a la maquetación un ritmo visual que el lector percibe aunque no sepa nombrarlo: títulos, imágenes y bloques de texto quedan alineados entre sí en lugar de flotar en posiciones arbitrarias. En un sitio adaptable, una rejilla también ofrece un único conjunto de reglas que ajustar según el ancho de pantalla, en lugar de reposicionar cada elemento a mano para cada tamaño.
CSS Grid, Flexbox y Bootstrap: cuándo usar cada uno, y el auge de Tailwind CSS
CSS Grid trabaja en dos dimensiones, filas y columnas a la vez, lo que lo hace adecuado para la estructura general de una página o una cuadrícula de tarjetas con alineación uniforme en ambos sentidos. Flexbox trabaja en un solo eje (fila o columna) y encaja en componentes más pequeños, como una barra de navegación o un grupo de botones, donde los elementos deben distribuirse o alinearse en una línea. La rejilla de Bootstrap es un sistema de 12 columnas construido sobre Flexbox, con clases listas para usar (col-6, col-4, etc.): sigue siendo muy común en los bootcamps de programación de América Latina y España porque permite montar una maquetación funcional sin escribir CSS propio. Tailwind CSS ha crecido con fuerza entre el mismo público con un enfoque distinto, clases de utilidad aplicadas directamente en el marcado en lugar de componentes de rejilla con nombre, lo que conviene a quienes buscan control fino sin salir de su HTML. Para un proyecto nuevo sin framework, el CSS Grid puro suele dar un resultado más limpio con menos marcado que las otras dos opciones.
Límites del código generado
El código que produce esta herramienta es un punto de partida para un único punto de corte, de ancho fijo. No genera media queries, así que el número de columnas y la separación se mantienen iguales en cualquier ancho de pantalla mientras no añadas tus propios puntos de corte. En la práctica, una maquetación suele reducir columnas en móvil (4 es habitual) y usar un número intermedio en tablet (8 es habitual), reservando el número completo solo para escritorio. Reduce el número de columnas y ajusta la separación dentro de una media query para cada punto de corte que necesite tu diseño.
Buenas prácticas de separación y margen
Los valores de separación habituales en diseño web son 8px, 16px y 24px, normalmente acordes con una escala de espaciado ya usada en otras partes del sitio (botones, relleno interno, márgenes) para que la maquetación resulte coherente en vez de arbitraria. La rejilla de 12 columnas viene del diseño impreso, donde una página dividida en 12 partes se repartía de forma exacta en mitades, tercios, cuartos o sextos, una propiedad que el diseño web conservó porque ofrece la misma flexibilidad para el ancho de las columnas. Un margen igual o mayor que la separación evita que el borde exterior de la maquetación quede apretado contra el borde de la pantalla. Para proporciones basadas en la relación de una página o imagen en lugar de un número de columnas, consulta la Calculadora de Relación de Aspecto, y para espaciados basados en la proporción áurea, la Calculadora de la Proporción Áurea.