Disposition en colonnes

Vous aurez souvent à créer des dispositions organisées en colonnes. CSS fournit différentes méthodes pour parvenir à de telles dispositions. Les grilles CSS ou les boîtes flexibles ou encore les dispositions multi-colonnes peuvent être utilisées et choisir l'une de ces méthodes dépend de ce que l'on veut obtenir. Dans ce guide, nous verrons ces différentes options.

three different styles of layouts which have two columns in the container.

Prérequis

Il existe plusieurs « motifs » qu'on peut vouloir réaliser avec des colonnes :

  • Un fil continu qui se divise en colonne, à la façon d'un journal papier.
  • Une seule ligne d'éléments divisée en colonnes qui ont la même hauteur.
  • Plusieurs lignes et colonnes qui sont alignées.

Les « recettes »

Selon le scénario souhaité, on utilisera différentes méthodes de disposition.

Un fil continu de contenu - Disposition multi-colonnes

En créant des colonnes avec une disposition multi-colonne, le texte pourra former un flux continu qui remplira chacune des colonnes à la suite des autres. Les colonnes auront toutes la même taille et il ne sera pas possible de cibler une colonne en particulier ou le contenu d'une colonne en particulier.

L'espacement entre les colonnes peut être géré avec la propriété column-gap et il est possible d'ajouter une ligne de délimitation grâce à column-rule.

On utilisera une disposition multi-colonnes lorsque :

  • On souhaite organiser le texte à la façon d'un journal imprimé
  • On a un ensemble de petits éléments qu'on souhaite fragmenter en colonnes
  • Il n'est pas nécessaire de cibler une colonne en particulier pour des raisons de mise en forme.

Une seule ligne fragmentée en cellules de même taille — Utilisation des boîtes flexibles

Les boîtes flexibles peuvent être utilisées afin de diviser du contenu en colonnes grâce à la propriété flex-direction utilisée avec la valeur row. Toutefois, une boîte flexible cible les éléments à l'intérieur du conteneur flexible et placera chaque enfant direct dans une nouvelle colonne. On a donc un comportement différent de celui vu précédemment avec les multi-colonnes.

À l'heure actuelle, il n'existe pas de méthode qui permette de créer une ligne entre les objets flexibles et la prise en charge des navigateurs pour les propriétés column-gap et row-gap est limitée. Pour créer un espace entre les éléments, il faudra donc utiliser une marge.

Les boîtes flexibles peuvent également être utilisées afin de créer des dispositions où les objets flexibles « passent à la ligne » en utilisant la propriété flex-wrap et la valeur wrap sur le conteneur.  Les nouvelles lignes répartiront l'espace pour cette ligne uniquement, il n'y aura pas d'alignement d'une ligne à l'autre (comme on peut le voir dans l'exemple qui suit). C'est pour cette raison qu'on décrit les boîtes flexibles comme étant une méthode de disposition sur une seul dimension : cette méthode permet de contrôler la disposition en ligne ou en colonne mais pas de gérer les deux à la fois.

On utilisera les boîtes flexibles pour :

  • Organiser des lignes ou colonnes d'objets indépendantes
  • Aligner les objets sur l'axe orthogonal au sens de lecture
  • Les cas où l'alignement d'une ligne sur l'autre n'est pas important

Aligner des objets en lignes et colonnes — Utilisation d'une grille

Si on souhaite organiser des objets sur des lignes et sur des colonnes, alors on choisira une grille CSS. La disposition à l'aide d'une grille permet d'organiser les éléments fils d'un contener de la même façon que les boîtes flexibles mais on peut également aligner les lignes et les colonnes. Aussi, si les boîtes flexibles sont une méthode unidimensionnelle, les grilles CSS permettent de jouer sur les deux dimensions.

On utiliser les grilles CSS lorsque :

  • On a des éléments/objets à organiser sur plusieurs lignes et colonnes
  • On souhaite pouvoir aligner les éléments sur les deux axes

Compatibilité des navigateurs

Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.

column-width

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 50
Support complet 50
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet 12
Support complet 12
Support complet 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Support complet 50
Support complet 50
Support complet 1.5
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
IE Support complet 10Opera Support complet 11.1Safari Support complet 3
Préfixée
Support complet 3
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet OuiChrome Android Support complet 50
Support complet 50
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Mobile Support complet Oui
Support complet Oui
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Android Support complet 50
Support complet 50
Support complet 4
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet 5.0
Support complet 5.0
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Intrinsic sizes
Expérimentale
Chrome Aucun support NonEdge ? Firefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android ? Edge Mobile ? Firefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android ?
On display: table-captionChrome Support complet OuiEdge Support complet OuiFirefox Support complet 37IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet 50Edge Mobile Support complet OuiFirefox Android Support complet 37Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet 5.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

column-rule

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 50
Support complet 50
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet 12
Préfixée
Support complet 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Support complet 52
Support complet 52
Support complet 3.5
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Notes Before Firefox 3, the default value for the normal keyword was 0 and not 1em.
IE Support complet 10Opera Support complet 11.1
Support complet 11.1
Support complet 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari Support complet 3
Préfixée
Support complet 3
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet OuiChrome Android Support complet 50
Support complet 50
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Mobile ? Firefox Android Support complet 52
Support complet 52
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Opera Android ? Safari iOS ? Samsung Internet Android Support complet 5.0
Support complet 5.0
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

flex

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 29
Support complet 29
Support complet 21
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet 12
Support complet 12
Support complet 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Support complet 20
Notes
Support complet 20
Notes
Notes Since Firefox 28, multi-line flexbox is supported.
Notes Before Firefox 32, Firefox wasn't able to animate values starting or stopping at 0.
Aucun support 20 — 61
Notes
Notes Flex items that are sized according to their content are sized using fit-content, not max-content.
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 44
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Aucun support 18 — 28
Désactivée
Désactivée From version 18 until version 28 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Support complet 11
Notes
Support complet 11
Notes
Notes Internet Explorer 11 ignores uses of calc() in the flex-basis part of the flex syntax. This can be worked around by using the longhand properties instead of the shorthand. See Flexbug #8 for more info.
Notes Internet Explorer 11 considers a unitless value in the flex-basis part to be syntactically invalid (and will thus be ignored). A workaround is to always include a unit in the flex-basis part of the flex shorthand value. See Flexbug #4 for more info.
Support complet 10
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Notes Internet Explorer 10 and 11 ignore uses of calc() in the flex-basis part of the flex syntax. This can be worked around by using the longhand properties instead of the shorthand. See Flexbug #8 for more info.
Notes Internet Explorer 10 and 11 consider a unitless value in the flex-basis part to be syntactically invalid (and will thus be ignored). A workaround is to always include a unit in the flex-basis part of the flex shorthand value. See Flexbug #4 for more info.
Opera Support complet 12.1Safari Support complet 9
Support complet 9
Support complet 6.1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet 4.4
Support complet 4.4
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet 29
Support complet 29
Support complet 25
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Mobile Support complet Oui
Support complet Oui
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Android ? Opera Android Support complet 12.1Safari iOS Support complet Oui
Support complet Oui
Support complet 7.1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

flex-wrap

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 29
Support complet 29
Support complet 21
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet 12Firefox Support complet 28IE Support partiel 11
Notes
Support partiel 11
Notes
Notes Partial support due to large number of bugs present. See Flexbugs.
Opera Support complet 17Safari Support complet 9WebView Android Support complet 4.4
Support complet 4.4
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet 29
Support complet 29
Support complet 25
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Mobile Support complet 12Firefox Android Support complet 52Opera Android Support complet 12.1Safari iOS Support complet 9.2Samsung Internet Android ?

Légende

Support complet  
Support complet
Support partiel  
Support partiel
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

grid-template-columns

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 57
Support complet 57
Support complet 29
Désactivée
Désactivée From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Support complet 16Firefox Support complet 52
Support complet 52
Support complet 40
Désactivée
Désactivée From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 44
Support complet 44
Support complet 28
Désactivée
Désactivée From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Support complet 10.1WebView Android Support complet 57Chrome Android Support complet 57
Support complet 57
Support complet 29
Désactivée
Désactivée From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Mobile Support complet 16Firefox Android Support complet 52
Support complet 52
Support complet 40
Désactivée
Désactivée From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 44Safari iOS Support complet 10.3Samsung Internet Android Support complet 6.0
minmax()Chrome Support complet 57
Support complet 57
Support complet 29
Désactivée
Désactivée From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Support complet 12Firefox Support complet 52
Support complet 52
Support complet 40
Désactivée
Désactivée From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE ? Opera Support complet 44
Support complet 44
Support complet 28
Désactivée
Désactivée From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Support complet 10.1WebView Android Aucun support NonChrome Android ? Edge Mobile Support complet 12Firefox Android Support complet 52
Support complet 52
Support complet 40
Désactivée
Désactivée From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Aucun support NonSafari iOS Support complet 10.3Samsung Internet Android ?
repeat()Chrome Support complet 57
Support complet 57
Support complet Oui
Désactivée
Désactivée This feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Support complet 16Firefox Support complet 57
Support complet 57
Aucun support 52 — 57
Notes
Notes calc() doesn't work in repeat() (see bug 1350069).
Aucun support ? — 52
Désactivée
Désactivée Until version 52 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 44
Support complet 44
Support complet Oui
Désactivée
Désactivée This feature is behind the Enable experimental Web Platform features preference.
Safari Support complet 10.1WebView Android ? Chrome Android ? Edge Mobile Aucun support NonFirefox Android Support complet 57
Support complet 57
Aucun support 52 — 57
Notes
Notes calc() doesn't work in repeat() (see bug 1350069).
Aucun support ? — 52
Désactivée
Désactivée Until version 52 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS Support complet 10.3Samsung Internet Android ?
fit-content()Chrome Support complet 29Edge Support complet 16Firefox Support complet 51IE Aucun support NonOpera Support complet 44Safari Support complet 10.1WebView Android Support complet 57Chrome Android Support complet 57Edge Mobile Support complet 16Firefox Android Support complet 51Opera Android Support complet 44Safari iOS Support complet 10.3Samsung Internet Android Support complet 7.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,