6XC

Calculadora de Columnas de Grid

Anchos de columna para cualquier contenedor, número de columnas y espaciado — con código CSS grid listo para copiar y tamaños de span multi-columna.

816 visitas

Las Matemáticas de las Columnas

Columna = (contenedor − (columnas−1) × espaciado) ÷ columnas. Un contenedor de 1200 px con 12 columnas y espaciados de 24 px da columnas de 78 px; un elemento que abarca 4 columnas mide 4×78 + 3×24 = 384 px. La herramienta lista cada ancho de span para que lleves medidas exactas a tus archivos de diseño.

En CSS rara vez se codifican estos valores a mano: display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px deja que el navegador haga la división. Los valores en píxeles importan para frames de Figma, exportaciones de imágenes y para entender a qué se resuelve realmente 1fr en tus breakpoints.

Preguntas Frecuentes

¿Deben incluirse los márgenes en el ancho del contenedor?

No — introduce el ancho del contenido (contenedor menos márgenes/padding laterales). Un diseño de 1440 px con 120 px de margen a cada lado tiene un contenedor de trabajo de 1200 px.

¿12 columnas o un número distinto?

12 se divide entre 2, 3, 4 y 6, por eso se convirtió en el valor por defecto. Los dashboards densos a veces usan 24; las páginas de marketing simples funcionan bien con 6 o incluso 4.

Herramientas Similares

Generador de Gradientes CSS Diseña gradientes CSS lineales, radiales y cónicos con vista previa en vivo y copia el código. Generar Generador de Sombra CSS (Box Shadow) Diseña una box-shadow de forma visual — desplazamientos, desenfoque, expansión, color, opacidad e inset — con vista previa en vivo. Generar Generador de Border Radius CSS Redondea cada esquina por separado o todas a la vez, en px o %, con vista previa en vivo y CSS copiable. Generar Generador de Sombra de Texto CSS Diseña un text-shadow con desplazamientos, desenfoque, color y opacidad — vista previa en vivo sobre texto de muestra. Generar