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 gouttières (espaces intercolonnes) et des marges. Colonnes Les colonnes contiennent le contenu principal d'une page. Leur largeur est définie en pourcentage au lieu de valeurs fixes afin d'être adaptative à 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 de colonnes total qui change, mais plutôt le pourcentage d'espace que prend chaque colonne. Gouttières (espaces intercolonnes) Les espaces intercolonnes, communément appelés gouttières, correspondent à l'espace qui se trouvent entre chaque colonne. Ils sont essentiels pour différencier les éléments visuels d'une interface.Les gouttières ont généralement une largeur fixe de 20 pixels, 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'un espace intercolonne. 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 pixels, 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 pxÉcrans larges : 1200 px et plus Combinaisons de conteneurs Chaque grille de 12 colonnes peut être décomposée en différentes combinaisons de conteneurs.Voici les combinaisons de conteneurs que nous utilisons dans le site, pour les petits écrans et les écrans larges.1 conteneur de 12 colonnes 2 conteneurs de 6 colonnes 3 conteneurs de 4 colonnes 1 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 colonnes 1 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 combinaison possible, soit 1 conteneur de 12 colonnes. Fin de la note Note À consulter Mettre les liens contextuels ici Fin de la note