Cluster und Abstände

Ziel: Zwei Schaltflächen ohne Raster nebeneinander setzen und verstehen, woher Abstände kommen.
Dauer: 3 Minuten
Sie brauchen: Eine Seite und ein paar kleine Blöcke

1. Wählen Sie Add Block und dann Cluster.
2. Geben Sie einen Name ein und stellen Sie die Anordnung ein: Justify, Align, Gap, Wrap und Width.
3. Wählen Sie in der Zeile des Clusters Add child block und fügen Sie die Elemente hinzu — etwa zwei Button Links.
4. Speichern Sie und prüfen Sie das Ergebnis in einem schmalen Fenster genauso wie in einem breiten.

Vier Blöcke steuern die Luft auf einer Seite, und zum falschen zu greifen ist die übliche Ursache für ein Layout, das sich nicht benimmt:

• Section — Spacing. Der vertikale Raum über und unter einem Inhaltsband. Das ist der große Hebel.
• Container — Flow. stack verteilt die Kinder des Containers gleichmäßig; none lässt sie, wie sie sind.
• Grid — Gap. Der Abstand zwischen Rasterzellen.
• Cluster — Gap. Der Abstand zwischen Elementen in einer Reihe.

Stehen zwei Absätze zu dicht beieinander, ist die Antwort der Flow des Containers — nicht ein leerer Plain-Text-Block.

• Fügen Sie nie einen leeren Block als Abstandshalter ein. Er überlebt, bis jemand die Seite am Telefon bearbeitet, und ein Screenreader liest ihn als leeren Absatz.
• Wrap: nowrap hält eine Reihe bei jeder Breite auf einer Zeile — richtig für zwei Schaltflächen, falsch für sechs Chips. Im Zweifel umbrechen lassen.
• Cluster ist für eine Handvoll kleiner Elemente in einer Reihe. Für gewichtige Inhalte nebeneinander nehmen Sie Columns oder Grid.
• Cluster steckt auch in Navigationsleisten und Card-Fußzeilen — deshalb begegnet er Ihnen in Shared Slots.