Calculadora de retícula (columnas, medianiles, cuadrícula 8pt)
Introduce el ancho de pantalla o de página, el número de columnas, el medianil y los márgenes para obtener anchos de columna exactos con una vista previa en cuadrícula de 8pt. Funciona en px y mm
Cargando la herramienta…
Introduzca el ancho total, el número de columnas, el medianil y los márgenes laterales para obtener el ancho de una columna y de cualquier grupo de columnas. Sirve para una retícula web de 12 columnas o para dividir una página impresa en milímetros.
Cómo se usa
- Elija px o mm en "Unidad" y luego un "Ancho predefinido", o escriba el "Ancho total".
- Introduzca "Columnas", "Medianil" y "Margen". Si los márgenes son distintos, ponga "Márgenes laterales" en "Izquierdo y derecho".
- Lea "Ancho de columna" y la tabla "Anchos combinados", y compruebe en la insignia si encaja en la cuadrícula elegida en "Unidad de cuadrícula". Si no encaja, pruebe el ancho total que indica la nota.
- Active "Comparar tres puntos de ruptura" para ver tres anchos a la vez y pulse "Copiar CSS" para llevarse el código.
Cómo funciona
- Ancho de columna = (ancho total − margen izquierdo − margen derecho − medianil × (columnas − 1)) ÷ columnas. Ancho de n columnas = ancho de columna × n + medianil × (n − 1).
- Con un "Ancho máximo del contenido", si el total es mayor, el contenido se queda en ese ancho y el resto se reparte entre los márgenes.
- En modo mm la unidad de cuadrícula está en puntos: 1 pt = 0,3528 mm, y 1 mm = 3,78 px a 96 dpi.
- Los valores se guardan en el navegador de este dispositivo.
Preguntas frecuentes
- ¿Cuánto mide una columna en una retícula de 1200 px y 12 columnas?
- Con un medianil de 24 px y sin márgenes, (1200 − 24 × 11) ÷ 12 = 78 px. Con un medianil de 32 px, 70,67 px.
- ¿Qué hago si la columna no cae en la cuadrícula de 8 px?
- La nota indica el múltiplo más cercano y el ancho total que lo produce: una columna de 78 px pasa a 80 px con un contenido de 1224 px. Un pequeño cambio en el medianil o los márgenes también funciona.
- ¿Cuántas columnas debe tener una página A4?
- No hay una sola respuesta. Dos o tres van bien para texto; seis o doce facilitan mezclar fotos y tablas. Introduzca A4 210 mm, márgenes de 15 mm y medianil de 4 mm para comparar.
- ¿Cómo uso el CSS copiado?
- .container fija el ancho del contenido y el relleno lateral; .grid fija las columnas y el espacio entre ellas. Un elemento que ocupa varias columnas lleva grid-column: span 4. En modo mm el fragmento incluye márgenes @page para imprimir.