Les pages ont une structure en grille avec des lignes qui contiennent des colonnes. On peut intégrer autant de lignes que souhaitées dans une page. Chaque ligne peut compter jusqu’à 6 colonnes de tailles égales ou non. Chaque colonne peut accueillir du texte, une image, un diaporama, …
La largeur des colonnes varie selon l’écran sur lequel on visionne le site. On retrouve toujours une marge de 30px entre chaque colonne. Sur un plan graphique, les lignes et les colonnes peuvent avoir un fond (couleur ou image) ou / et un contour (couleur et épaisseur du contour au choix).
Structure classique
Les lignes et les colonnes ci-dessous sont contenues dans une zone centrale grisée (le gris peut être remplacé par une autre couleur, une image ou bien être transparent) qui fait 1200px de large sur un PC. Le nombre de colonnes peut varier de 1 à 6 (Pour 5 colonnes, nous consulter).
Réduisez la largeur de votre navigateur pour observer le comportement des lignes et des colonnes sur tablette ou smartphone. Vous remarquerez 4 paliers :
- Fenêtre de 1200 pixels ou plus,
- Fenêtre de moins de 1200 pixels,
- Fenêtre de moins de 991 pixels,
- Fenêtre de moins de 768 pixels,
1 /1 – 1170px
1 /2 – 570px
1 /2 – 570px
2/3 – 770px
1/3 – 370px
1 /3 – 370px
1 /3 – 370px
1 /3 – 370px
1 /4 – 270px
1 /4 – 270px
1 /4 – 270px
1 /4 – 270px
1 /4 – 270px
3/4 – 870px
1 /4 – 270px
1 /2 – 570px
1 /4 – 270px
5/6 – 970px
1/6 – 170px
1/6 – 170px
1/6 – 170px
1/6 – 170px
1/6 – 170px
1/6 – 170px
1/6 – 170px
1/6 – 170px
1/6 – 170px
1/6 – 170px
1/6 – 170px
1/6 – 170px
1/6 – 170px
2/3 – 770px
1/6 – 170px
1/6 – 170px
1/6 – 170px
1/6 – 170px
1 /2 – 570px
Structure avec section étirée sur toute la largeur
La zone grisée fait la largeur complète de la page. Cela ne change rien pour les tailles lignes et les colonnes sont toujours contenues au centre dansLes règles de base sont les suivantes :
Réduisez la largeur de votre navigateur pour observer le comportement des lignes et des colonnes sur tablette ou smartphone. Vous remarquerez 4 paliers :
- Fenêtre de 1200 pixels ou plus,
- Fenêtre de moins de 1200 pixels,
- Fenêtre de moins de 991 pixels,
- Fenêtre de moins de 768 pixels,
1/2 – 1170px
1/2 – 570px
1/2 – 570px
2/3 – 770px
1/3 – 370px
1/3 – 370px
1/3 – 370px
1/3 – 370px
1/4 – 270px
1/4 – 270px
1/4 – 270px
1/4 – 270px
1/4 – 270px
3/4 – 870px
1/4 – 270px
1/2 – 570px
1/4 – 270px
5/6 – 970px
1/6 – 170px
1/6 – 170px
1/6 – 170px
1/6 – 170px
1/6 – 170px
1/6 – 170px
1/6 – 170px
1/6 – 170px
2/3 – 770px
1/6 – 170px
1/6 – 170px
1/6 – 170px
1/6 – 170px
1/2 – 570px
Structure avec section et contenus étirés sur toute la largeur
La zone grisée fait la largeur complète de la page comme les tailles lignes et les colonnes sont toujours contenues au centre dansLes règles de base sont les suivantes . Leur largeur est exprimé en % et plus en px.
Réduisez la largeur de votre navigateur pour observer le comportement des lignes et des colonnes sur tablette ou smartphone. Vous remarquerez 4 paliers :
- Fenêtre de 1200 pixels ou plus,
- Fenêtre de moins de 1200 pixels,
- Fenêtre de moins de 991 pixels,
- Fenêtre de moins de 768 pixels,
1/1 – 100%
1/2 – 50%
1/2 – 50%
2/3 – 66.66%
1/3 – 33.33%
1/3 – 33.33%
1/3 – 33.33%
1/3 – 33.33%
1/4 – 25%
1/4 – 25%
1/4 – 25%
1/4 – 25%
1/4 – 25%
3/4 – 75%
1/4 – 25%
1/2 – 50%
1/4 – 25%
5/6 – 83.33%
1/6 – 16.66%
1/6 – 16.66%
1/6 – 16.66%
1/6 – 16.66%
1/6 – 16.66%
1/6 – 16.66%
1/6 – 16.66%
1/6 – 16.66%
2/3 – 66.66%
1/6 – 16.66%
1/6 – 16.66%
1/6 – 16.66%
1/6 – 16.66%
1/2 – 50%