10/10/2019 CSS Layout - Grid
Cours Programmation Web
HTML CSS Media Typographie JavaScript WordPress Git Outils Figma
Processus Newsletters Divers About
CSS — Bases CSS — Préfixes — Couleurs — CSS bling — Box Model — CSS Layout —
CSS Layout - Flexbox — CSS Layout - Grid — RWD — Animations — CSS - bonnes pratiques
CSS Layout - Grid
Le CSS Grid Layout est une nouvelle spécification CSS, en cours d’implémentation, qui a le
potentiel de révolutionner la mise en page CSS. Comme son nom l’indique, il s’agit d’un
modèle de mise en page basé sur une grille à deux dimensions, sur laquelle viennent se
placer des blocs de contenu.
Cette fonctionalité CSS a été proposée en 2011 par Microsoft, et implémentée à fins de test
dans Internet Explorer 10 et 11. Le projet a été repris par le W3C, où son développement se
poursuit.
En début 2017, le module CSS Grid Layout fait son entrée dans les
navigateurs. Il est actif dans Firefox 52 (sorti le 7 mars 2017) et Chrome 57
(sorti le 9 mars 2017).
Il est donc désormais possible de l’utiliser. Une manière prudente de le faire est d’utiliser la
méthode de chargement CSS optionnel @supports:
// Styles sans la grille
@supports ( display: grid ) {
.foo { display: grid; }
// Styles avec la grille
}
Exemples de grille
[Link] 1/3
10/10/2019 CSS Layout - Grid
Ajouter une gouttière:
La propriété column-gap permet de définir l’espace entre les colonnes d’un élément.
column-gap: 2rem;
Voir: Documentation MDN
Ressources CSS Grid Module
Support actuel des navigateurs: [Link]
Un tutoriel (le site de référence de Rachel Andrew): [Link]
Un autre tutoriel (par Alsa Créations): [Link]
[Link]
Un livre publié en début 2016 par Rachel Andrew: Get Ready For CSS Grid Layout, A Book
Apart, 2016
En anglais:
An Introduction to CSS Grid Layout - conférence de Rachel Andrew, à Paris Web 2015,
Présente le module CSS Grid Layout.
modifier cette page sur GitHub
slideshow
Ont contribué à cette page:
CSS — Bases CSS — Préfixes — Couleurs — CSS bling — Box Model — CSS Layout —
CSS Layout - Flexbox — CSS Layout - Grid — RWD — Animations — CSS - bonnes pratiques
Cours Programmation Web
Eracom, Lausanne coursweb Un support de cours pour apprendre la
EAA, La Chaux-de-Fonds 16kbit programmation web.
2016–2018 Sujets: HTML, CSS, JS, WordPress, Git.
Licence des contenus: CC-BY-SA.
[Link] 2/3
10/10/2019 CSS Layout - Grid
[Link] 3/3