Le Champ Grille CSS (également appelé Grid CSS) est un outil de positionnement des champs, au même titre que le champ FlexBox.

• suivre automatiquement les règles de positionnement de la grille CSS.
• avoir des règles spécifiques.

Pour créer un champ de type Grille CSS :

1. Sous le volet "Création", dans le groupe "Conteneurs", cliquez sur "Flexbox".
2. Cliquez dans la page à la position où le champ doit être créé. Le champ apparaît en création.

1. Sélectionnez le champ.
2. Sélectionnez l'option "Description" dans le menu contextuel du champ.

Onglet "Général"

L'onglet "Général" de la fenêtre de description du champ "Grille CSS" permet de retrouver ou de modifier les propriétés de la grille :

• Nombre de lignes et pour chaque ligne hauteur et nom.
• Nombre de colonnes et pour chaque colonne largeur et nom.
• Nom des cellules.

• Il est possible de nommer tous les éléments du champ Grille CSS : colonnes, lignes et cellules.
• Il est possible d'utiliser n'importe quelle unité CSS.

Comment définir la grille en mode manuel ?

WEBDEV propose de définir les caractéristiques de la grille CSS via la fenêtre de description du champ, mais il est également possible de définir entièrement la grille en CSS :

• Dans l'onglet "Général" de la fenêtre description du champ, cliquez sur "Editer le CSS de description de la grille".
• Saisissez le CSS correspondant à la description des colonnes, des lignes et des zones.

Il est ainsi possible d'utiliser simplement une grille fournit par un développeur Web ou requise par une intégration externe.

Onglet "Détail"

L'onglet "Détail" de la fenêtre de description permet de définir les contraintes de positionnement appliquées par le champ Grille CSS. Ces contraintes concernent :

• le placement automatique des champs (propriété CSS grid-auto-flow) : Les champs peuvent être positionnés par défaut en ligne ou en colonne, en permettant ou non la présence de trous. Par exemple, si la contrainte n'autorise pas les trous, les champs seront automatiquement déplacés pour qu'aucune cellule du champ Grille CSS ne soit vide. Cette contrainte peut être générale ou ne concerner que les lignes ou les colonnes.
• l'alignement de l'ensemble des lignes ou colonnes dans le champ : Alignement horizontal des colonnes (ou alignement vertical des lignes) et répartition de l'espace vide. Il est également possible de définir l'espace entre chaque colonne et entre chaque ligne de la grille.
• l'alignement par défaut des champs contenus dans les lignes ou les colonnes de la grille : Il est possible de définir l'alignement vertical ou horizontal des champs à l’intérieur d'une cellule d'un champ Grille CSS.
• CSS complémentaire : Code CSS personnalisé indiquant l'ancrage souhaité. Ce code CSS surcharge les paramètres.

Onglet "Contenu"

L'onglet "Contenu" de la fenêtre de description permet de gérer les comportements spécifiques des champs présents dans le champ Grille CSS.

1. Sélectionnez le champ voulu dans l'onglet "Contenu" du champ Grille CSS.
2. Définissez :
   • La position du champ dans la grille : il est possible de préciser sa position, sa taille et/ou le nom de la cellule hôte. Il est ainsi possible de préciser que le champ peut être affiché sur 2 cellules obligatoirement.
   • L'alignement horizontal / vertical du champ dans la cellule.
     Remarque : Il est possible de conserver les paramètres d'alignement automatique définis dans les règles du champ Grille CSS.
   • Spécifiez si nécessaire le CSS personnalisé permettant de décrire les paramètres du champ.