🔳Generador de porcentajes para rejillas CSS Grid

¿Por qué usar porcentajes en CSS Grid?

grid-template-columns acepta varias unidades (px, fr, %, minmax()), y aunque la unidad fr es la más común para repartir espacio de forma proporcional, los porcentajes siguen siendo útiles cuando necesitas que el ancho de cada columna sea un valor exacto y predecible —por ejemplo, para que coincida con un diseño entregado por un equipo de diseño en Figma que especifica anchos en porcentaje— o cuando combinas la rejilla con otros elementos posicionados de forma absoluta que también usan porcentajes. Este generador de porcentajes para CSS Grid calcula esos valores exactos a partir de simples pesos relativos, sin necesidad de resolver la proporción a mano.

¿Cómo se calculan los porcentajes de columna?

Ejemplo: con pesos 1, 2, 1 (tres columnas donde la central es el doble de ancha), la suma es 4, así que los porcentajes son 25%, 50% y 25%. Un detalle importante que muchos desarrolladores pasan por alto: cuando defines un gap, CSS Grid resta primero el espacio total de los gaps del ancho del contenedor, y solo después reparte el espacio restante según los porcentajes — por eso esta calculadora muestra tanto el porcentaje como su equivalente exacto en píxeles, calculado sobre el ancho ya descontado el gap.

Guía paso a paso: cómo generar tu rejilla en porcentajes

1) Escribe los "Anchos o Pesos de Columna" separados por coma (por ejemplo, 1,2,1). 2) Indica el "Ancho del Contenedor" en píxeles. 3) Ajusta el "Gap" opcional entre columnas. 4) La vista previa en vivo, la tabla de porcentajes y píxeles, y el código grid-template-columns se generan al instante. Si necesitas definir también las filas de tu rejilla (no solo las columnas), cambia al Modo 2: Grid 2D para calcular ambos ejes a la vez con su propia vista previa 2D.

Modo 2D: filas y columnas a la vez

Una rejilla real casi siempre necesita definir tanto grid-template-columns como grid-template-rows. El Modo 2 de esta herramienta calcula ambos ejes de forma independiente a partir de sus propios pesos, con una vista previa en vivo que muestra cómo se distribuyen las celdas en un grid del tamaño que definas, generando el código CSS completo listo para copiar.

Casos de uso: cuándo conviene un grid en porcentajes

Los porcentajes en Grid encajan bien al maquetar layouts de tipo revista o dashboard donde el diseño original ya especifica anchos exactos en %, al combinar Grid con elementos posicionados de forma absoluta o con otras técnicas de maquetación que también usan porcentaje, y al documentar un sistema de columnas reutilizable donde el porcentaje exacto de cada columna debe quedar registrado como parte del design system. Si en cambio tu layout es de una sola fila que debe repartirse dinámicamente según el contenido disponible, la herramienta más adecuada suele ser la calculadora de porcentajes para CSS Flexbox.

Errores comunes al calcular porcentajes de Grid

El error más frecuente es calcular el porcentaje sobre el ancho total del contenedor sin descontar primero el gap, lo que produce columnas ligeramente más anchas de lo esperado y puede provocar un desbordamiento horizontal sutil. Otro error habitual es mezclar unidades sin verificar cómo interactúan: combinar fr y % en la misma declaración es válido, pero el resultado final no siempre es intuitivo si no entiendes que fr reparte el espacio restante después de resolver el resto de unidades.

Porcentajes en Grid frente a la unidad fr

fr es generalmente más simple porque reparte automáticamente el espacio sobrante sin que tengas que recalcular nada si añades o quitas una columna. Los porcentajes, en cambio, dan un valor absoluto y auditable, útil cuando ese ancho exacto importa para otra parte del sistema. Si tu rejilla incluye imágenes que también deben escalar de forma fluida dentro de cada columna, combina esta herramienta con la calculadora de ancho fluido porcentual para imágenes web.

Compatibilidad de navegadores y consejos profesionales

CSS Grid tiene soporte completo en todos los navegadores modernos (Chrome, Firefox, Safari, Edge) desde 2017, por lo que usar porcentajes en grid-template-columns no requiere ningún prefijo ni comprobación especial de compatibilidad. Un consejo profesional habitual: si tu rejilla debe adaptarse también a distintos tamaños de pantalla, considera combinar los porcentajes generados aquí con la función minmax() — por ejemplo, minmax(0, 25%) evita que una columna se desborde si su contenido es más ancho que el porcentaje asignado, un problema muy común con imágenes o tablas dentro de columnas estrechas. Otro consejo: documenta siempre el peso relativo de cada columna (no solo el porcentaje final) en los comentarios de tu CSS, para que el siguiente desarrollador entienda de dónde viene esa proporción si necesita añadir una columna más adelante.

Preguntas Frecuentes (FAQ)