Grille
Objectif : Disposer des contenus au sein d’une grille responsive
Il est important de savoir ce que vous voulez dans votre grille et l’agencement souhaité. N’hésitez pas à réaliser des croquis de votre page avant de faire votre grille. Vous pouvez consulter notre article sur les zonings web pour vous aider.
Sélectionnez le type d’élément “Grille | Début” pour commencer la création d’une grille responsive.
Par défaut, la grille est configurée sur 2 colonnes avec l’option résolution Général. Vous pouvez définir jusqu’à 12 colonnes, conformément au standard web.
💡 Vous devez d’abord configurer la résolution Général, puis faire les résolutions spécifiques si nécessaire. La grille SMARTGEAR se réagence automatiquement si rien n’est spécifié. Pour plus d’informations, retrouvez plus de détails sur le fonctionnement des grilles dans notre article spécifique.
En mode expert, vous pouvez modifier l’espacement des contenus avec le champ “Espace Inter-éléments”. Sélectionnez une valeur dans la liste de gauche et l’unité dans celle de droite.
💡 em et rem sont des unités relatives à la taille de la police de votre site.
Créer un élément dans la grille
Une fois ces réglages sauvegardés, cliquez sur le bloc d’ajout de contenu ci-dessous :
Une fenêtre s’ouvre et vous pouvez créer un élément de contenu comme indiqué dans la section dédiée. Mettez en place votre élément, sauvegardez-le et fermez la fenêtre. La page se recharge et votre contenu apparait alors dans la grille.
Vous pouvez cliquer sur l’icône 
pour éditer cet élément, sur l’icône 
pour le copier, sur le 
pour le supprimer. La dernière icône 
permet de déplacer l’élément dans la grille, on en parle un peu plus bas.
Pour chaque élément, vous avez 3 champs de configuration liés à son placement dans la grille. En effet, vous pouvez indiquer que l’élément prendra plusieurs colonnes ou plusieurs lignes, afin de le mettre en avant.
💡 Pour les experts, vous pouvez même ajouter des classes CSS additionnelles à un élément.
Déplacer un élément dans la grille
Cliquez et maintenez l’icône enfoncée pour déplacer un élément dans la grille. Si vous souhaitez placer l’élément au début ou à la fin de la grille, relâchez-le sur les blocs prévus à cet effet.
