Calculadora de ancho de columna en CSS Grid: columnas y gap en píxeles
Calcula el ancho exacto de cada columna de una retícula después de restar los gaps (gutters), para CSS Grid, filas con Flexbox y sistemas de diseño.
Cómo funciona
ancho de columna = (contenedor − (columnas − 1) × gap) ÷ columnas
Una retícula fija reparte el ancho del contenedor entre N columnas y las N − 1 separaciones que hay entre ellas, así que primero hay que restar los gaps y luego dividir el espacio que queda en partes iguales. Siempre hay una separación menos que columnas, porque las orillas exteriores no llevan gap. En CSS Grid esto lo resuelve solo grid-template-columns: repeat(N, 1fr) con un gap, pero conocer el ancho real en píxeles sirve para entregar especificaciones, dimensionar imágenes (srcset) y comprobar si un contenido cabe.
Ejemplo resuelto
Sofía maqueta un contenedor de 960px con 12 columnas y un gap de 20px. Las separaciones suman 11 × 20 = 220px; quedan 960 − 220 = 740px, que entre 12 dan 61.67px por columna, alrededor del 6.42% del ancho del contenedor.
Preguntas frecuentes
¿Todavía necesito esto si uso 1fr en CSS Grid?
Grid hace la división al renderizar, pero muchas veces necesitas el ancho en píxeles de antemano: para dimensionar imágenes responsivas, pasar especificaciones a desarrollo o confirmar que un componente cabe en cierto número de columnas.
¿Por qué 12 columnas tienen 11 separaciones?
Porque los gaps solo van entre columnas y no hay separación por fuera de la primera ni de la última. N columnas siempre tienen N − 1 separaciones internas, por eso el espacio total es (columnas − 1) × gap.
¿Qué tamaño de gap conviene usar?
Los sistemas de diseño comunes usan de 16 a 32px. Un gap grande da un diseño más aireado pero achica cada columna; en pantallas angostas se suele reducir el gap o el número de columnas para que el contenido siga siendo usable.
Calculadoras relacionadas
Esta calculadora tiene fines informativos. Verifica los resultados importantes antes de tomar decisiones.