Mise en page Webflow : sections, Flexbox, Grid et responsive

Les éléments de structure de Webflow

D'après l'article d'aide Webflow sur la construction des mises en page (mis à jour le 19 mai 2026), la catégorie Structure du panneau Add propose cinq éléments.

Le Div Block reste la brique de base pour tout regroupement qui n'a pas besoin de Flexbox ou de Grid. Webflow explique la différence entre Section, Container et Div Block dans cette vidéo officielle :

Le box model : marges, padding et bordures

Chaque élément est une boîte composée du contenu, du padding (espace intérieur), de la bordure et de la marge (espace extérieur). Dans le Style panel, la section Spacing affiche ces valeurs sous forme de schéma cliquable. Règle pratique : utilisez le padding pour donner de l'air à l'intérieur d'un bloc et le gap de Flexbox ou Grid pour espacer des éléments voisins, plutôt que des marges au cas par cas. Pour les unités, voir notre comparatif rem vs px.

Flexbox ou Grid : lequel choisir dans Webflow ?

Flexbox dispose des éléments sur un seul axe, en ligne ou en colonne. Grid les dispose sur deux axes, en lignes et colonnes à la fois. Les deux se règlent dans le Style panel, section Layout, en choisissant Display: Flex ou Grid sur l'élément parent.

En Flexbox, la grille d'alignement 3 × 3 du Style panel règle en un clic l'alignement des enfants, et le champ Gap fixe l'espace entre eux. En Grid, vous définissez colonnes, lignes et gaps, puis placez les enfants automatiquement ou manuellement. Réservez la position absolute aux éléments superposés et décoratifs (voir notre guide des positions Webflow).

Quick Stack : la grille prête à l'emploi

Quick Stack est un élément en display grid dont les cellules sont des div en Flexbox vertical. En le déposant, Webflow propose 8 préréglages (1, 2, 3 ou 4 colonnes, 2 + 1, 1 + 2, 2 × 2...). Selon la page d'aide Quick Stack (mise à jour le 29 janvier 2026), sur les breakpoints plus petits, le nombre de lignes passe en Auto et vous réglez la taille et l'ordre de chaque cellule. La fusion de cellules ne se fait que sur Desktop. La fonctionnalité est encore signalée en bêta.

L'ancien élément Columns n'apparaît plus dans les éléments de structure recommandés. Sur un site existant qui l'utilise, il continue de fonctionner, mais préférez Quick Stack ou Grid pour toute nouvelle section.

Le responsive : comprendre les breakpoints Webflow

Selon l'aide Webflow sur les breakpoints (mise à jour le 2 septembre 2026), les styles partent du breakpoint Desktop (Base) et se propagent dans les deux sens.

Conséquence pratique : une valeur modifiée sur Tablet ne remonte jamais sur Desktop, mais elle descend sur les deux mobiles. Une fois un style changé sur un breakpoint, il ne reçoit plus les modifications faites au-dessus. Pour la méthode complète, voir notre guide pour créer un site responsive sur Webflow.

Chez Synqro, nous intégrons chaque section sur Desktop, puis nous la vérifions immédiatement sur Tablet et Mobile portrait avant de passer à la suivante. Corriger le responsive section par section coûte beaucoup moins cher que de reprendre toute la page à la fin.

Typographie et contenus riches

• Stylisez les balises (Body, H1 à H6, Paragraph, Link) au niveau All pages avant de créer des classes : tout le site en hérite.
• Choisissez le niveau de titre selon la structure du contenu, pas selon la taille voulue : un seul H1 par page, puis des H2 et H3 dans l'ordre.
• Utilisez le Rich Text pour les contenus longs (articles, pages légales) et stylisez ses balises internes une fois pour toutes.
• Limitez la largeur des paragraphes (un max-width en rem ou en ch) pour garder des lignes lisibles.

Les erreurs fréquentes de mise en page

• Construire la mise en page avec des positions absolute : tout se chevauche dès que l'écran rétrécit.
• Fixer des hauteurs en px sur des blocs de texte : le texte déborde sur mobile ou quand il est traduit.
• Empiler des div sans rôle (div dans div dans div), ce qui rend le Navigator illisible.
• Créer une nouvelle classe pour chaque variation au lieu d'utiliser des combo classes ou des composants.
• Ne tester que dans le Designer : vérifiez toujours sur un vrai téléphone après publication.

Garder une mise en page légère et maintenable

Une convention de nommage commune évite que le site devienne ingérable après quelques mois. La méthode Client-First est la plus répandue dans l'écosystème Webflow. Supprimez régulièrement les classes inutilisées avec la fonction Clean up du gestionnaire de styles, compressez les images avant import et renseignez leur texte alternatif.

Synqro est une agence Webflow Premium Partner fondée en 2019. Un site complet demande chez nous 8 à 12 semaines, dont une bonne part consacrée à cette structure invisible qui rend le site facile à faire évoluer. Pour un projet, découvrez notre accompagnement Webflow.