Columns et Grid

Objectif : disposer plusieurs éléments de contenu côte à côte.
Durée : 4 minutes
Il vous faut : une page et trois choses qui gagnent à être montrées ensemble

1. Sélectionnez Add Block, puis Columns.
2. Remplissez Columns Title, Columns Subtitle et Intro Text — Columns apporte son propre titre, et c'est ce qui le distingue de Grid.
3. Choisissez une Columns Variant : cards encadre chaque colonne, plain les laisse nues, stats convient aux chiffres courts.
4. Sur la ligne de Columns, sélectionnez Add child block et choisissez Column Item. Remplissez Column Title et Column Text, et répétez pour chaque colonne.
5. Pour une disposition nue, sélectionnez Add Block et choisissez plutôt Grid. Réglez Columns (2, 3 ou 4) et Gap.
6. Ajoutez ce que vous voulez comme enfants du Grid — les Cards sont le choix habituel.

Columns est un bloc de contenu. Il a un titre, un sous-titre, une introduction et une idée fixe de ce qui va dedans : des Column Items.

Grid est un bloc de mise en page. Aucun texte propre, aucun avis sur ses enfants — juste un nombre de colonnes et un écart.

Prenez Columns quand l'ensemble a besoin d'une introduction. Prenez Grid quand vous disposez des blocs qui parlent déjà d'eux-mêmes.

• Les deux se replient sur une seule colonne au téléphone. C'est le but, et c'est pourquoi un tableau est le mauvais outil pour du côte-à-côte.
• Quatre colonnes, c'est souvent deux colonnes avec des étapes en plus. Sur un portable, chacune est étroite ; au téléphone, ce n'est qu'une longue liste.
• Alternate media/text sections sur Grid inverse les côtés image et texte au fil de la page, pour la classique mise en page alternée.
• Grid se moque de ce qu'il contient : un Grid de Headers créé par mégarde s'affiche exactement aussi mal que ça en a l'air.