Envelopper une grille

Ce motif permet d'aligner le contenu d'une grille au centre grâce à un élément qui l'enveloppe. On peut également choisir quels éléments aligner au centre et lesquels adosser aux côtés.

Spécifications sommaires

Les éléments placés sur la grille devraient pouvoir être alignés au centre et/ou sur les bords.

Recette

Choix effectués

Cette recette utilise la fonction minmax() afin de définir les tailles des pistes pour la propriété grid-template-columns.

Les deux colonnes extérieures ont une taille maximale de 1fr, ce qui signifie qu'elles occuperont tout l'espace disponible dans le conteneur de grille.

Méthodes de recours ou alternatives

Si cette recette est utilisée pour une page entière, il peut s'avérer utile de définir max-width et des marges horzontales avec auto afin que le contenu soit centré horizontalement :

.grid {
  max-width: 1200px;
  margin: 0 auto; // on centre le conteneur en horizontal
  display: grid;
  /* Other grid code goes here */
}

/* On retire max-width et les marges si le navigateur */
/* prend en charge les grilles */
@supports (display: grid) {
  .grid {
    max-width: none;
    margin: 0;
  }
}

Pour qu'un élément soit isolé et colle au bord du viewport, on peut utiliser cette astuce de Una Kravets :

.item {
  width: 100vw;
  margin-left: 50%;
  transform: translate3d(-50%, 0, 0);
}

On a ainsi une méthode plus compatible mais qui ne permet pas d'aligner les éléments aussi facilement que sur une grille CSS.

Accessibilité

Bien que les grilles CSS nous permettent potentiellement de positionner n'importe où on le souhaite, il est important que l'ordre des éléments dans le document soit le même que l'ordre visuel, utilisé pour la navigation (voir les grilles CSS et l'accessibilité pour plus de détails).

Compatibilité des navigateurs

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,