Il existe plusieurs manières de gérer une grille ou une impression de grille en CSS. Il est important de se souvenir qu'en matière de code, il est possible d’aboutir à un résultat similaire de multiples façons, et que l'arbitrage de celle qui pourrait porter le titre de meilleure dépend de plusieurs paramètres ouverts et (relativement) relatifs à la situation et à chacun.
Flux classique
Cette technique consiste à utiliser les propriétés display de base, inline, block et inline-block pour simuler une grille.
Avantages
- Extrême simplcité
Inconvénients
- En inline-block, l'attribution de largeurs à des élément-enfants dont la somme correspond exactement à la largeur de leur élément-parent conduit au passage à la ligne suivante du dernier élément, car des espaces subsites entre les élément-enfants. Ainsi, il faut toujours donner une largeur légèrement inférieure aux élément-enfants pour constituer une ligne, ce qui résulte en un manque de précision.
Exemple responsive
Les Columns
Les columns permettent de séparer le flux en un nombre de colonnes données à l'intérieur d'un élément, et de définir des gouttières. Contrairement à ce que permettent les CSS Grids, il est impossible de donner à un élément une largeur de plusieurs colonnes (tous les éléments occupent exactement une colonne).
Liens
- https://www.w3schools.com/css/css3_multiple_columns.asp
- https://developer.mozilla.org/en-US/docs/Web/CSS/columns
Avantages
- Simplicité
Inconvénients
- Impossible de savoir à l'avance quels seront les éléments en haut des colonnes avec un flux variable et une mise en page responsive. Obtenir des colonnes où les éléments en haut de la page suivent l'ordre du HTML nécessite d'utiliser JavaScript et des librairies comme Mansonry.
- Parfois inconsistant selon les navigateurs (respect aléatoire de la propriété break-inside qui empêche qu'un élément soit séparé entre deux colonnes).
Exemple
Les Flex-boxs
Les flex-boxs sont une série de commandes CSS, activée par l’attribution de la commande display: flex à un élément. Celles-ci permettent d'aligner des éléments horizontalement sur la toute la surface d'un élément parent, et plus généralement de gérer facilement le comportement d'un flux d'éléments.
Liens
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- https://www.w3schools.com/css/css3_flexbox.asp
Avantages
- Beaucoup de commandes et de possibilités
Inconvénients
- Complexe, difficile d'accès
- N'est pas fait pour la création de grilles à proprement parlé (reste un détournement)
Exemple
Les CSS Grids
Arrivées dans l’arène il y a quelques années seulement, les CSS Grids représentèrent pour beaucoup de designers la fin du cauchemar CSS et la possibilité d'enfin utiliser un véritable système de grilles en web. Je trouve ce système personnellement très pratique mais toujours un peu contradictoire avec l'idée de pages en flux et les tentatives de penser la mise en page web différemment de la mise en page print.
Liens
- https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids
- https://www.w3schools.com/css/css_grid.asp
Avantages
- Très efficace et fiable
Inconvénients
- Un peu difficile à comprendre au premier abord
- Entérine la nécessité d'une grille pour toute mise en page web (par nature dynamique)