# Espacio y densidad Una escala de siete pasos para cada espacio. Vinculada al refinamiento (pocos valores, siempre los mismos) y a lo "nunca complicado" (espacio para que cada cosa se vea por sí misma). ## La escala Cada espacio proviene de una sola escala de siete pasos. Nadie elige "unos 20 píxeles": tú eliges un paso. space-1 4px space-2 8px space-3 16px space-4 24px space-5 40px space-6 64px space-7 96px ## Cuanto más cerca, más juntos Lo que pertenece junto permanece cercano (icon y palabra: `space-1`); partes distintas permanecen separadas (entre secciones: `space-7`). El espacio indica qué es un grupo, no las líneas ni los cuadros. Do **Recordatorio**Martes, 9 am**Respaldo**Cada noche Título y detalle juntos; un elemento lejos del siguiente. Don’t **Recordatorio**Martes, 9 am**Respaldo**Cada noche Todo con el mismo espacio: no puedes decir qué detalle pertenece a qué título. ### Sin espacios fuera de escala Si ningún paso encaja, la composición es incorrecta, no la escala. ## La densidad depende de la pantalla Leer páginas respira. Las pantallas de trabajo, con tablas y formularios para escanear y actuar a gran escala, son compactas: `data-density="compact"` en el área de trabajo aprieta celdas y controles y deja el texto solo. Cambiar la densidad anima: las filas se encogen, no saltan. Cronograma Cuando Respaldo semanal Domingo, 3 am Regar las plantas Martes, 9 am Informe mensual El 1º, 8 am ## Ancho y cuadrícula ### Una columna de lectura tiene una medida Nunca supera el ancho cómodo (`measure-reading`, aproximadamente 70 caracteres por línea). ### Una cuadrícula nunca crece más allá de la pantalla Una columna de cuadrícula, por defecto, no se encoge por debajo de su contenido: una tabla ancha estira la columna y toda la página comienza a desplazarse lateralmente. Use `minmax(0, 1fr)` para las columnas y deje que el contenido ancho se desplace dentro de su propia caja. Do Una columna de lectura cómoda permite que el ojo regrese al inicio de la siguiente línea sin perderse. Cuando la línea se estira de extremo a extremo en una pantalla ancha, cada retorno se convierte en una búsqueda, y la lectura cansa antes de terminar el párrafo. La columna se detiene en una medida cómoda, incluso con espacio sobrante. Don’t Una columna de lectura cómoda permite que el ojo regrese al inicio de la siguiente línea sin perderse. Cuando la línea se estira de extremo a extremo en una pantalla ancha, cada retorno se convierte en una búsqueda, y la lectura cansa antes de terminar el párrafo. La línea se estira tan lejos como lo permite la caja: en una pantalla ancha, el ojo se pierde en el camino de regreso. ```css .colunas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } ``` Do Cronograma · Cuándo · Estado · Ejecuciones · Propietario · Última ejecución Otra columna Con minmax(0, 1fr), la columna respeta el contenedor y el contenido ancho se desliza dentro de él. Don’t Cronograma · Cuándo · Estado · Ejecuciones · Propietario · Última ejecución Otra columna Con 1fr, la columna crece con su contenido y pasa por el borde punteado: en móvil, toda la página se desliza lateralmente. Esta regla proviene de un error real: el primer showcase de Feitio se desplazaba 34px lateralmente en móvil debido a una tabla.