Système de grille Le système de grille est essentiel puisqu'il nous permet de structurer l'espacement entre les différents éléments d'une page et d'assurer une cohérence visuelle entre nos interfaces, peu importe l'appareil utilisé.Tous les composants sont conçus en fonction de notre système de grille. Dans cette page : Composition d'une grille Le système de grille que nous utilisons est basé sur une grille de 12 colonnes, qui comprend des colonnes, des espaces intercolonnes (aussi communément appelées gouttières) et des marges. Colonnes Les colonnes renferment le contenu principal d'une page. Leur largeur est définie en pourcentages au lieu de valeurs fixes afin de pouvoir s'adapter à toutes les tailles d'écran.Il y a toujours 12 colonnes dans une page, peu importe la taille de l'écran. Quand on atteint le point de rupture, ce n'est pas le nombre total de colonnes qui change, mais plutôt le pourcentage d'espace que prend chaque colonne. Gouttières Les gouttières correspondent à l'espace qui se trouve entre chaque colonne. Elles sont essentielles pour différencier les éléments visuels d'une interface.Les gouttières ont généralement une largeur fixe de 20 px, peu importe la taille de l'écran.La largeur d'un élément doit prendre fin à l'intérieur d'une colonne et non à la fin d'une espace intercolonnes. Marges Les marges sont les espaces aux extrémités gauche et droite de l'écran. Elles évitent que le contenu soit collé à la limite de l'écran.Les marges ont généralement une largeur fixe de 20 px, peu importe la taille de l'écran. Points de rupture Ce terme désigne le moment où le design d'un site change en fonction de la taille de l'écran utilisé.Les points de rupture sont comme des paliers qui, une fois franchis, permettent d'adapter le design ou le contenu à la nouvelle largeur de l'écran.Voici les différents points de rupture dans le site :Appareils mobiles : 768 pxTablettes : entre 769 px et 992 pxPetits écrans : entre 993 px et 1199 pxGrands écrans : 1200 px et plus Combinaisons de conteneurs Chaque grille de 12 colonnes peut être décomposée en combinaisons de conteneurs.Voici les combinaisons de conteneurs que nous utilisons dans le site, pour les petits écrans et les grands écrans.1 conteneur de 12 colonnes2 conteneurs de 6 colonnes3 conteneurs de 4 colonnes1 conteneur de 9 colonnes et 1 conteneur de 3 colonnes1 conteneur de 3 colonnes et 1 conteneur de 9 colonnes1 conteneur de 3 colonnes, 1 conteneur de 6 colonnes et 1 conteneur de 3 colonnes1 conteneur de 8 colonnes et 1 conteneur de 4 colonnes1 conteneur de 4 colonnes et 1 conteneur de 8 colonnes Note Note Dans le cas des appareils mobiles, il n'y a qu'une seule disposition possible, soit 1 conteneur de 12 colonnes. Fin de la note