Créer une grille dans un éditeur de texte

Les grilles permettent de mettre en page du contenu grâce à un système de colonne et de lignes similaire à un tableau. Les grilles n'ont pas de bordure et respectent une position fixe.

Ajouter une grille avec l'éditeur de texte

1
Dans un éditeur de texte, cliquez sur le bouton Grille



2
Définissez un nombre de colonnes et de lignes



3
Remplissez les cases. Dans l'exemple ci-dessous, la page est divisé en trois colonnes sur deux lignes. Quel que soit le contenu, les cases auront toujours la même largeur.



Une page web est divisée en 12 colonnes. C'est pourquoi il est possible d'avoir sur la même ligne d'une grille 2, 3, 4, 6 ou 12 colonnes => Pour une grille avec un nombre impair de colonnes, voir la section suivante.



4
Cliquez sur le bouton vert Mettre à jour pour enregistrer les modifications



5
Pour ajouter des images : optez pour des images de petite taille si vous désirez conserver un espace entre les colonnes.


Modifier la largeur des colonnes

1
Pour modifier la largeur des colonnes, il est nécessaire d'aller modifier le code de la grille à la source. Pour cela, cliquez sur le bouton Source



2
On peut voir que la grille se divise en 6 "paragraphes", chacun représentant une cellule. 3 sur la ligne 1 (row-1) et 3 sur la ligne 2 (row-2)



Chaque cellule est définie entre autre par la ligne suivante : 



Le chiffre 4 correspond à la largeur de la case. La largeur des 3 colonnes est égales à 12 (3x4). Ainsi, il est possible de modifier la largeur de chaque colonne tant que le total est égal à 12. 

Dans l'exemple ci-dessous, j'ai modifié les chiffres afin que :

La première ligne soit composée d'une case d'une largeur de 2/12, une deuxième de 6/12 et une troisième de 4/12. La deuxième ligne est composée d'une case d'une largeur de 3/12, puis 3/12 et enfin 6/12.



Dans l'éditeur de texte, la visualisation de la grille s'adapte automatiquement :



Une fois le texte mis à jour, les largeurs des colonnes sont modifiées sur la plateforme :



Ajouter un espacement entre des images  

1

 Dans l'éditeur de texte, double-cliquer sur l'image pour ouvrir l'encart d'édition.

2

 Indiquer un nombre dans le champ "espacement horizontal", puis cliquer sur "OK".



Créer une grille avec un nombre de colonnes impaire   

1
   Dans un éditeur de texte, cliquer sur le bouton " Tableau". 



2
Dans la modale qui s'ouvre, indiquer "0" dans le champ "taille de la bordure", afin que les bordures n'apparaissent pas. 
   

3

Si besoin de centrer les colonnes, aller dans "Source" et indiquer <center> au début du tableau et </center> à la fin.