2020-01-12: Création
Les CSS Grid sont apparues en 2017 et permet le positionnement des éléments en X, Y.
Coté HTML:
<div class="container"> <div class="items">1</div> <div class="items">2</div> <div class="items">3</div> <div class="items">4</div> <div class="items">5</div> <div class="items">6</div> </div>
Coté CSS:
.container { background-color: #eee; width: 1000; margin: 30px auto; display: grid; grid-template-rows: 150px 150px; grid-template-columns: 150px 150px 150px; grid-row-gap: 30px; grid-column-gap: 30px; grid-gap: 30px; //raccourcie row/column } .items { padding: 20px; font-size: 30px; font-family: sans-serif; } .item1 { background-color: pink; } .item2 { background-color: teal; } .item3 { background-color: yellowgreeb; } .item4 { background-color: crimson; } .item5 { background-color: goldenrod; } .item6 { background-color: indianred; }
Rendu dans Firefox
.container { [...] display: grid; grid-template-rows: repeat(2, 150px); grid-template-columns: repeat(2, 150px) 400px; grid-gap: 30px; }
.container { [...] display: grid; grid-template-rows: repeat(2, 150px); grid-template-columns: repeat(2, 150px) 1fr; grid-gap: 30px; }
.container { [...] display: grid; grid-template-rows: repeat(2, 150px); grid-template-columns: 1fr 6fr 1fr; grid-gap: 30px; }
Permet de déplacer un élément dans la grille :
.item1 { grid-row-start: 2; grid-row-end: 3; grid-column-start: 2; grid-column-end: 3; grid-row: 2 / 3; //raccourci grid-column: 2 / 3; grid-area: 2 / 2 / 3 / 3; //raccourci pas facilement compréhensible background-color: pink; }
Permet d'étirer un élément dans la grille (avec ou sans empilement):
.item1 { grid-row: 1 / 2; grid-column: 1 / 4; //ou pour dire la dernière position: -1 grid-column: 1 / -1; //ou pour dire 3 cellule de large: span 3 grid-column: 1 / span 3; background-color: pink; } .item2 { grid-row: 1 / 2; grid-column: 2 / 3; background-color: teal; }
La cellule 1 pourrait être une bannière et la cellule 2 un titre.
Modification de la taille en ligne et en colonnes :
.item1 { grid-row: 1 / 2; grid-column: 1 / span 2; background-color: pink; } .item2 { grid-row: 1 / 3; grid-column: 3 / 4; background-color: teal; }
.container { [...] display: grid; grid-template-rows: [header-start]150px[header-end contenu-start] 150px [contenu-end]; grid-template-columns: repeat(3, [col-start]150px[col-end]); grid-gap: 30px; }
Utilisation des index de repeat :
.item4 { grid-column: col-start 3 / col-end 3; background-color: crimson; }
Nomage des lignes complètes :
.container { [...] display: grid; grid-template-rows: repeat(2, 150px); grid-template-columns: repeat(3, 150px); grid-template-areas: "head head head" "foot foot foot"; grid-gap: 30px; }
Utilisation :
.item1 { grid-area: head; background-color: pink; }
Nomage des lignes incomplètes : Il faut remplacer le nom par un point
.container { [...] display: grid; grid-template-rows: repeat(2, 150px); grid-template-columns: repeat(3, 150px); grid-template-areas: "head head ." "foot foot foot"; grid-gap: 30px; }
Utilisation : (même code)
.item1 { grid-area: head; background-color: pink; }
Exemple de code:
.container { background-color: #eee; width: 1000; margin: 30px auto; display: grid; //une seule ligne paramétrée explicitement grid-template-rows: repeat(1, 150px); // il y a '1' dans le repeat grid-template-columns: repeat(3, 150px); grid-auto-flow: column; grid-auto-columns: 400px; //grid-auto-rows: 200px; //hauteur de 200px (pas dans le screen) grid-gap: 30px; }
Ici on gère le centrage du contenu des cellules.
Les variantes de align-items sur axe Y:
Les variantes de justify-items sur axe X:
.container { background-color: #eee; width: 1000; margin: 30px auto; align-items: center; justify-items: center; display: grid; grid-template-rows: repeat(2, 150px); grid-template-columns: repeat(3, 150px); grid-gap: 30px; }
Il faut utiliser align-self et justify-self: Exemple de code :
.item2 { justify-self: end; align-self: end; background-color: teal; }
Il s'agit de positionner le container lui-même dans la page.
Code de base :
.container { background-color: #eee; height: 1000px; width: 1000; margin: 30px auto; display: grid; grid-template-rows: 150px 150px; grid-template-columns: 150px 150px 150px; grid-row-gap: 30px; grid-column-gap: 30px; grid-gap: 30px; //raccourcie row/column }
Variantes de justify-content:
[...] justify-content: center; [...]
[...] justify-content: space-between; [...]
[...] justify-content: space-around; [...]
[...] justify-content: space-evenly; [...]
[...] justify-content: end; [...]
[...] justify-content: start; [...]
Variantes de align-content:
[...] align-content: center; [...]
Au même titre que justify-content on a les variantes :
[...] align-content: space-between; [...]
[...] align-content: space-around; [...]
[...] align-content: space-evenly; [...]
[...] align-content: end; [...]
[...] align-content: start; [...]
Il s'agit de gérer les largeurs du cellule en fonction du texte qui est dedans. Code de base : Coté HTML:
<div class="container"> <div class="items">Un simple paragraphe</div> <div class="items">2</div> <div class="items">3</div> <div class="items">4</div> <div class="items">5</div> <div class="items">6</div> </div>
Coté CSS:
.container { background-color: #eee; width: 1000; margin: 30px auto; display: grid; grid-template-rows: repeat(2, 150px); grid-template-columns: repeat(3, 150px); }
Le rendu montre l'affichage de texte dans la cellule 1:
Voici le code pour l'adaptation de la cellule à la longueur totale du texte:
.container { [...] grid-template-rows: repeat(2, 150px); grid-template-columns: max-content 1fr 1fr; //ici max-content }
Exemple de code tenant compte du mot le plus grand:
.container { [...] grid-template-rows: repeat(2, 150px); grid-template-columns: max-content 1fr min-content; //ici min-content }
Code pour adapter les rangers:
.container { [...] grid-template-rows: repeat(2, min-content); //ici min-content grid-template-columns: max-content 1fr min-content; }
On impose une hauteur de ligne de 150px. Si le texte est plus haut, c'est lui qui modifie la hauteur de ligne :
.container { [...] grid-template-rows: repeat(2, min-max(150px, min-content)); //ici min-max grid-template-columns: max-content 1fr min-content; }
Code de base : Coté HTML:
<div class="container"> <div class="items">1</div> <div class="items">2</div> <div class="items">3</div> <div class="items">4</div> <div class="items">5</div> <div class="items">6</div> </div>
Coté CSS:
.container { background-color: #eee; width: 90%; margin: 30px auto; display: grid; grid-template-rows: repeat(2, 150px); grid-template-columns: minmax(200px, 700px) repeat(2, 1fr); // ici minmax }
Résolution 1900px: La colonne 1 est à 700px
Résolution 909: La colonne 1 commence à diminuer
Résolution 302: La colonne 1 préserve les 200px minimum
Code de base : Coté HTML:
<div class="container"> <div class="items">1</div> <div class="items">2</div> <div class="items">3</div> <div class="items">4</div> <div class="items">5</div> <div class="items">6</div> </div>
Coté CSS:
.container { background-color: #eee; margin: 30px auto; display: grid; grid-template-rows: repeat(2, 150px); grid-template-columns: repeat(auto-fill, 100px); width: 1000px; }
Code de base : Coté HTML:
<div class="container"> <div class="items">1</div> <div class="items">2</div> <div class="items">3</div> <div class="items">4</div> <div class="items">5</div> <div class="items">6</div> </div>
Coté CSS:
.container { background-color: #eee; margin: 30px auto; display: grid; grid-template-rows: repeat(2, 150px); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); //ici minmax grid-auto-rows: 150px; //ici les lignes explicites seront de la même taille que les implicites width: 90%; }
Résolution 1568:
Résolution 805:
Résolution 513:
Il s'agit de positionner les éléments (div) comme une page de blog avec un header, bar de navigation, contenu et footer.
Coté HTML:
<!DOCTYPE html> <html lang="fr" dir="ltr"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title>Blog CSS Grid</title> </head> <body> <div class="container"> <div class="cell header">Header</div> <div class="cell side">SideBar</div> <div class="cell box">Box 1</div> <div class="cell box">Box 2</div> <div class="cell box">Box 3</div> <div class="cell main">Main content</div> <div class="cell footer">Footer</div> </div> </body> </html>
Coté CSS:
html { box-sizing: border-box; font-size: 62.5%; } body { background-color: #b0b0b0; } .container { font-size: 1.5rem; font-family: "sans serif"; width: 70%; margin: 30px auto; display: grid; grid-gap: 15px; grid-template-rows: [header-start]50px [header-end box-start]100px [box-end main-start]300px [main-end footer-start]50px [footer-end]; grid-template-columns: [side-start]120px [side-end box1-start]1fr [box1-end box2-start]1fr [box2-end box3-start]1fr [box3-end]; } .cell { background-color: red; color: white; padding-top: 10px; padding-left: 10px; } .header { grid-column: side-start / box3-end; } .side { grid-row: box-start / main-end; } .box { height: 100px; } .main { grid-column: box1-start / box3-end; } .footer { grid-column: side-start / box3-end; }