# Raum und Dichte Eine Siebenstufige Skala für jeden Raum. Verknüpft mit Feinjustierung (wenige Werte, immer gleich) und mit "nie verworren" (Platz für jedes Ding, um auf seine eigene Art gesehen zu werden). ## Die Skala Jeder Raum stammt aus einer einzigen Siebenstufigen Skala. Niemand wählt "etwa 20 Pixel": du wählst einen Schritt. space-1 4px Abstand-2 8px Abstand-3 16px Abstand-4 24px Abstand-5 40px Abstand-6 64px Abstand-7 96px ## Nachmalnäher, je enger Was zusammengehört, bleibt nah (Icon und Wort: `space-1`; verschiedene Teile bleiben entfernt (zwischen Sektionen: `space-7`). Raum sagt, was eine Gruppe ist, nicht Linien und Kästen. Do **Erminnerung**Di, 9 Uhr**Rückkopie**Jeden Abend Title and detail together; one item far from the next. Don’t **Erminnerung**Di, 9 Uhr**Rückkopie**Jeden Abend Everything with the same space: you cannot tell which detail belongs to which title. ### No space off the scale Wenn kein Schritt passt, ist die Komposition falsch, nicht der Maßstab. ## Density depends on the screen Leseseiten atmen. Arbeitsbildschirme mit Tabellen und Formularen zum Scannen und massenhaften Handeln sind kompakt: `data-density="compact"` auf dem Arbeitsbereich drückt Zellen und Steuerelemente zusammen und lässt den Text allein. Das Ändern der Dichte animiert: Zeilen schrumpfen, sie springen nicht. Terminplan Wenn Wöchentlicher Backup Sonntag, 3 Uhr Pflanzen gießen Montag, 9 Uhr Monatlicher Bericht Der 1. um 8 Uhr ## Breite und Raster ### Eine Lesespalte hat eine Messgröße Sie geht nie über die bequeme Breite (`measure-reading`, etwa 70 Zeichen pro Zeile) hinaus. ### Ein Raster wächst nie über den Bildschirm hinaus Eine Spalte im Raster schrumpkt standardmäßig nicht unter ihren Inhalt: eine breite Tabelle streckt die Spalte und der gesamte Seitenanfang scrollt seitwärts. Verwenden Sie `minmax(0, 1fr)` für Spalten und lassen Sie breiten Inhalt innerhalb seines eigenen Kastens scrollen. Do Eine bequeme Lesespalte lässt das Auge zum Anfang der nächsten Zeile zurückkehren, ohne sich zu verlieren. Wenn die Zeile auf einem breiten Bildschirm von Kante zu Kante streckt, wird jede Rückkehr zur Suche und das Lesen ermüdet vor dem Ende des Absatzes. Die Spalte stoppt an einer bequemen Messgröße, auch wenn Platz übrig bleibt. Don’t Eine bequeme Lesespalte lässt das Auge zum Anfang der nächsten Zeile zurückkehren, ohne sich zu verlieren. Wenn die Zeile auf einem breiten Bildschirm von Kante zu Kante streckt, wird jede Rückkehr zur Suche und das Lesen ermüdet vor dem Ende des Absatzes. Die Zeile streckt sich so weit wie der Kasten zulässt: auf einem breiten Bildschirm verliert das Auge beim Zurückgehen. ```css .colunas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } ``` Do Terminplan · Wann · Status · Läuft · Besitzer · Letzter Lauf Eine weitere Spalte Mit minmax(0, 1fr) beachtet die Spalte den Kasten und breiter Inhalt scrollt darin hinein. Don’t Terminplan · Wann · Status · Läuft · Besitzer · Letzter Lauf Eine weitere Spalte With 1fr wächst die Spalte mit ihrem Inhalt und geht über die gestrichelte Kante hinaus: auf Mobilgeräten scrollt die gesamte Seite seitwärts. Diese Regel stammt aus einem echten Fehler: Feitios erste Showcase hat auf dem Handy wegen einer Tabelle 34px seitwärts gescrollt.