Mise en page

Au cours du temps, et particulièrement depuis l’avènement de CSS et de la navigation mobile, les principes et les outils de mise en page ont beaucoup évolué sur le Web. Plusieurs outils et techniques nous permettent aujour’hui de concevoir des mises en page pour le web.

Flexbox

Flexbox est principalement conçu pour déterminer la mise en page d’éléments dans un contexte unidimensionnel (une ligne ou une colonne). Il est idéal pour construire des barres de navigation, pour centrer un élément dans son conteneur ou pour aligner des éléments.

Consulter la documentation sommaire et voir quelques exemples avec flexbox dans la section dédiée.

Grid

Grid est la dernière innovation de CSS pour la mise en page. C’est un module puissant –potentiellement complexe– qui est une des plus grandes évolutions de la mise en page pour le Web. Il est dédié aux mise en page multidimensionnelles (lignes et colonnes).

Consulter la documentation sommaire et voir quelques exemples avec flexbox dans la section dédiée.

Relative et absolue

Les positionnements absolus et relatifs d’éléments offrent une très grande souplesse pour organiser des éléments dans l’espace.

Ils permettent à des éléments positionnés en valeurs absolues ou relatives de “sortir du flux”. Ces éléments deviennent alors des “calques” que l’on peut dimensionner et placer dans l’espace indépendemment les uns des autres.

Consulter la documentation sommaire et voir quelques exemples avec position: absolute ou position: relative dans la section dédiée.

Old school & future-proof

Tableaux, lignes et cellules

Avant CSS, on utilisait les éléments <table>, leurs <tr> (lignes) et <td> (cellules) pour mettre en page les sites web. Pour créer des espaces dans la mise en page, on utilisait des images transparentes (spacer.gif) en forçant leurs tailles. C’était douloureux, inefficace et non-sémantique au possible (les <table> sont dédiées à l’affichage de données tabulaires).

Voir le site de Libération en 2000, sur web.archive.org.

Propriétés float et inline-block

Les propriétés CSS float:left|right et display:inline-block ont ensuite permis de créer des mise en pages plus souples, et de retrouver la dimension sémantique. Ces techniques, bien que souffrant de nombreuses limites, sont matures et efficientes, mais ont été supplantées depuis par les modules CSS Grid et Flexbox.

Voir l’archive de la documentation sur float et inline-block.

Ressources

Layoutland

Learn what's now possible in graphic design on the web — layout, CSS Grid, and more. A series for designers and web developers created by Jen Simmons, Mozilla Designer and Developer Advocate.

☞ https://www.youtube.com/layoutland

Exemples

Quelques exemples de mise en page sont disponibles dans la section dédiée

Contenu adapté de Jeremy Thomas et Louis Éveillard, sous license CC BY-NC-SA 4.0.