Cluster e spaziatura

Obiettivo: mettere due pulsanti affiancati senza una griglia e capire da dove arriva la spaziatura.
Tempo: 3 minuti
Serve: una pagina e un paio di blocchi piccoli

1. Selezionate Add Block, poi Cluster.
2. Dategli un Name, poi impostate la disposizione: Justify, Align, Gap, Wrap e Width.
3. Sulla riga del Cluster selezionate Add child block e aggiungete gli elementi: due Button Link, per esempio.
4. Salvate e controllate il risultato sia in una finestra stretta sia in una larga.

Quattro blocchi controllano l'aria di una pagina, e prendere quello sbagliato è la causa abituale di un impaginato che non si comporta:

• Section — Spacing. Lo spazio verticale sopra e sotto una fascia di contenuto. È quello grosso.
• Container — Flow. stack distanzia i figli del container in modo uniforme; none li lascia come sono.
• Grid — Gap. Lo spazio fra le celle della griglia.
• Cluster — Gap. Lo spazio fra gli elementi di una riga.

Se due paragrafi stanno troppo vicini, la risposta è il flow del Container, non un blocco Plain Text vuoto.

• Non aggiungete mai un blocco vuoto per spaziare. Sopravvive finché qualcuno non modifica la pagina dal telefono, e uno screen reader lo legge come un paragrafo vuoto.
• Wrap: nowrap tiene una riga su una sola linea a ogni larghezza: giusto per due pulsanti, sbagliato per sei chip. Nel dubbio lasciate che vada a capo.
• Cluster serve per una manciata di elementi piccoli in riga. Per contenuti di sostanza affiancati usate Columns o Grid.
• Cluster è anche ciò che sta dentro le barre di navigazione e i piè di card, ed è per questo che compare negli Shared Slot.