La vista de Rejilla
Breakpoints, columnas, medianiles, márgenes y un ancho máximo global — donde cada medida avanza por la misma escala que tu tipografía y tu color.
La barra de herramientas
Cada breakpoint es una pestaña: móvil, tablet y escritorio por defecto (4 / 8 / 12 columnas — la convención del sector), con ancho mínimo, ancho de previsualización, número de columnas, medianil y margen. Añade o quita breakpoints libremente; las etiquetas son contenido y editables.
El ancho máximo es global y — cuando está activado — un tope rígido: un paso de flecha que empujaría el ancho total por encima de él se detiene con un aviso emergente, en lugar de aplicarse en silencio y avisar después. La única píldora de advertencia que queda aparece solo cuando bajas el tope por debajo de un total existente.
Avanzar por pasos
Selecciona una columna, un medianil o un margen y:
- ← / → — hace avanzar la medida por la escala global. Un medianil pasa de 16 → 21 → 28, nunca a un valor arbitrario.
- Shift+← / → — cambia el número de columnas.
Este es el sentido de tener la rejilla en la misma herramienta: el ritmo del espacio en blanco de tu maquetación y el ritmo de tamaños de tu tipografía provienen de la misma progresión, así que no pueden divergir en silencio.
La línea base no se define aquí
El lienzo muestra la retícula de línea base, pero la unidad de línea base se deriva
de la escala — base ÷ 2, mostrada con su derivación explícita (8px (16/2)). Cambia
la base en la barra superior y la línea base la sigue. La vista de rejilla la muestra;
la escala es su dueña.
La superposición de columnas de la vista de Tipografía refleja el breakpoint más grande de aquí — un solo dueño, una sola dirección de verdad.
Teoría
Guías de rejilla de maquetación — anatomía de columnas, proporciones de medianil, cómo elegir breakpoints — y guías de espaciado para el pensamiento de 8 puntos sobre el que se construye la línea base.