# Espaço e densidade Uma régua de sete passos para todo espaço. Ligado ao requinte (poucos valores, sempre os mesmos) e ao "nunca convoluto" (ar para cada coisa ser vista sozinha). ## A régua Todo espaço sai de uma régua só, de sete passos. Ninguém escolhe "uns 20 pixels": escolhe um passo. space-1 4px space-2 8px space-3 16px space-4 24px space-5 40px space-6 64px space-7 96px ## Quanto mais perto, mais junto O que pertence junto fica próximo (ícone e palavra: `space-1`); partes diferentes ficam longe (entre seções: `space-7`). O espaço é que diz o que é grupo, não as linhas e caixas. Faça assim **Lembrete**Terça, 9h**Backup**Toda madrugada Título e detalhe juntos; um item longe do outro. Não faça **Lembrete**Terça, 9h**Backup**Toda madrugada Tudo com o mesmo espaço: não dá para saber qual detalhe é de qual título. ### Nenhum espaço fora da régua Se nenhum passo serve, a composição está errada, não a régua. ## Densidade depende da tela Páginas de leitura respiram. Telas de trabalho, com tabelas e formulários para olhar rápido e agir em lote, são compactas: `data-density="compact"` na área de trabalho aperta células e controles e deixa o texto em paz. Trocar a densidade anima: as linhas encolhem, não pulam. Agendamento Quando Backup semanal Domingo, 3h Regar as plantas Terça, 9h Relatório do mês Dia 1, 8h ## Largura e grid ### Uma coluna de leitura tem medida Nunca passa da largura confortável (`measure-reading`, cerca de 70 caracteres por linha). ### Um grid nunca cresce além da tela Uma coluna de grid, por padrão, não encolhe abaixo do conteúdo: uma tabela larga estica a coluna e a página inteira passa a rolar para o lado. Use `minmax(0, 1fr)` nas colunas, e deixe o conteúdo largo rolar dentro da própria caixa. Faça assim Uma coluna de leitura confortável deixa o olho voltar ao começo da próxima linha sem se perder. Quando a linha estica de ponta a ponta numa tela larga, cada volta vira uma busca, e a leitura cansa antes do fim do parágrafo. A coluna para numa medida confortável, mesmo com espaço sobrando. Não faça Uma coluna de leitura confortável deixa o olho voltar ao começo da próxima linha sem se perder. Quando a linha estica de ponta a ponta numa tela larga, cada volta vira uma busca, e a leitura cansa antes do fim do parágrafo. A linha estica até onde a caixa deixa: numa tela larga, o olho se perde na volta. ```css .colunas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } ``` Faça assim Agendamento · Quando · Situação · Disparos · Responsável · Última vez Outra coluna Com minmax(0, 1fr), a coluna respeita a caixa e o conteúdo largo rola dentro dela. Não faça Agendamento · Quando · Situação · Disparos · Responsável · Última vez Outra coluna Com 1fr, a coluna cresce com o conteúdo e passa da borda tracejada: no mobile, a página inteira rola para o lado. Esta regra veio de um erro de verdade: a primeira vitrine do Feitio rolava 34px para o lado no mobile por causa de uma tabela.