Éditeur Studio : Choisir entre les outils basés sur Flexbox et ceux basés sur Grid

L'Éditeur Studio offre de puissants outils de mise en page pour organiser les éléments, chacun étant adapté à des besoins de design spécifiques. Ces outils sont basés sur deux technologies CSS courantes : Grid et Flexbox, et comprendre cette différence peut vous aider à planifier les meilleures mises en page responsives pour présenter le contenu de votre client. 

Dans cet article, nous diviserons les outils de mise en page par type, vous expliquerons leurs fonctionnalités clés et vous aiderons à décider ce qui convient le mieux à vos besoins.

Les grilles sont un modèle CSS en deux dimensions qui utilise des lignes et des colonnes pour organiser les éléments dans des cellules prédéfinies. Ils sont particulièrement puissants pour créer des mises en page responsives et modulables avec un contrôle précis.

Les sections vides sont livrées avec une grille intégrée, contenant une seule cellule (contenant toute la section). Divisez la grille en plusieurs cellules si nécessaire pour donner une structure adaptative au contenu. Après avoir décidé de votre mise en page pour ordinateur, vous pouvez en choisir une autre pour les points de rupture plus petits.

Appliquez une grille CSS avancée offre une liberté totale pour créer des mises en page complexes dans les grilles de section, les conteneurs, les fenêtres promotionnelles, les flexboxes et les éléments de répéteur. Vous pouvez paramétrer la taille exacte de chaque cellule, à chaque point de rupture, en utilisant des mesures responsives (ex. fr, min./max., %). 

Conseillé pour  : Les mises en page complexes ayant besoin d'ajustements au pixel près.

Un conteneur est un outil de mise en page simple mais essentiel. Lorsque vous ajoutez des éléments à la boîte conteneur, il devient automatiquement leur élément parent et définit leur structure. 

Recommandé pour : Mises en page autonomes et séparées à l’intérieur des sections. 

Flexbox est un modèle CSS unidimensionné optimisé pour les mises en page où les éléments doivent s'ajuster dynamiquement dans un conteneur parent. Avec les outils flexbox, les éléments « sont flexibles » de manière transparente pour s'adapter à l'espace attribué, qu'ils soient en extension, en réduction ou en ligne.

Une cellule est un conteneur flexible invisible qui garantit l'alignement vertical ou horizontal des éléments.  L'alignement permet de garder les marges entre les éléments intactes et d'éviter que les éléments ne se chevauchent sur les écrans plus petits.

De plus, vous pouvez paramétrer l'ordre des éléments de la pile par point de rupture pour vous assurer que la mise en page est soignée sur toutes les tailles d'écran. 

Suggestion pour : Mises en page autonomes et séparées dans une section, où les éléments ont besoin d'un alignement précis le long d'un seul alignement horizontal ou vertical. 

Une flexbox est une mise en page flexible prête à l'emploi où les éléments sont automatiquement renvoyés pour s'adapter à chaque écran. Il est composé de conteneurs responsives, avec différents types d'affichage pour s'adapter à votre contenu spécifique (ex mosaïque, barre de défilement, colonnes). 

Vous pouvez choisir un type d'affichage différent pour chaque zone d'affichage (ex. les mises en page de curseur fonctionnent très bien pour les appareils mobiles) et définissez également un ordre d'élément spécifique.

Recommandé pour : Organiser un important volume de contenu dans une mise en page claire et pratique. 

Un répéteur est une liste d'éléments qui ont le même design et la même mise en page, mais un contenu différent dans chacun. Les ajustements de la mise en page et du design sont automatiques afin que vous n'ayez jamais à vous soucier de la cohérence. 

Ce qui rend les répéteurs vraiment uniques, c'est la possibilité de les connecter à vos collections de contenu. Cela vous permet de gérer et de mettre à jour le contenu du back-end sans affecter le design réel, ce qui en fait l'outil de mise en page optimisé pour les données. 

Recommandé pour : Les listes ou tout type de contenu que vous souhaitez diviser en éléments parfaitement cohérents.

Avant de sélectionner l'un de nos outils, planifiez la mise en page souhaitée pour chaque taille d'écran. Ensuite, vous pouvez choisir un outil de mise en page qui inclut les fonctionnalités dont vous avez besoin. 

Chaque outil de mise en page est conçu pour s'adapter à différentes quantités et types de contenu. Par exemple, un conteneur fonctionne bien pour un contenu plus petit et ciblé, tandis qu'une grande grille de section convient mieux à l'organisation de mises en page complexes. 

De même, si les flexboxes et les répéteurs sont excellents pour présenter de grands quantités de contenu de manière organisées, ils ont des objectifs distincts. Les répéteurs simplifient la cohérence en appliquant la même mise en page et le même design à tous les éléments, tandis que les flexboxes vous donnent la liberté de concevoir le design de chaque élément individuellement.

Les éléments Flexbox et Grid diffèrent dans la manière dont le contenu s'adapte aux différentes tailles d'écran. Les grilles affichent un nombre différent de rangées et de colonnes pour s'adapter aux écrans plus petits. Dans les outils basés sur flexbox, le contenu est automatiquement renvoyé et/ou réorganisé pour s'adapter à l'écran du visiteur.

Seuls les répéteurs prennent en charge cette option, choisissez donc cet outil si vous devez afficher le contenu des collections du système de gestion de contenu (CMS). 

Vous pouvez également connecter des éléments spécifiques (ex. texte, image) à la collection et ajoutez-les à un conteneur ou à une pile pour organiser la mise en page.