Positionnement

Par défaut les enfants se positionnent dans l'ordre de leur création dans chacune des cases de gauche à droite et de haut en bas.

Le nombre de rangées dépend du nombre de blocs à positionner.

Prenons l'exemple suivant :

1
<main>
2
									<div id="div1">
3
									Contenu 1
4
									</div>
5
									<div id="div2">
6
									Contenu 2
7
									</div>
8
									<div id="div3">
9
									Contenu 3
10
									</div>
11
									...
12
									<div id="div9">
13
									Contenu 9
14
									</div>
15
									</main>
1
main {
2
									display : grid;
3
									grid-template-columns: repeat(3, 100px);
4
									grid-auto-rows: 100px;
5
									}
Contenu 1
Contenu 2
Contenu 3
Contenu 4
Contenu 5
Contenu 6
Contenu 7
Contenu 8
Contenu 9
grid-area

DéfinitionPositionner dans une cellule

Cellule

Une cellule est définie par deux lignes de colonne et deux lignes de rangée.

1
#div3 {
2
									grid-column-start: 2;
3
									grid-column-end: 3;
4
									grid-row-start: 3;
5
									grid-row-end: 4;
6
									}

Le contenu 3 se retrouve dans la cellule de deuxième colonne et de troisième ligne.

Contenu 1
Contenu 2
Contenu 3
Contenu 4
Contenu 5
Contenu 6
Contenu 7
Contenu 8
Contenu 9
grid-area

Écriture raccourcie

1
#div3 {
2
									grid-column: 2 / 3;
3
									grid-row: 3 / 4;
4
									}

Ou encore

1
#div3 {
2
									grid-area: 3 / 2 / 4 / 3;
3
									}

Start Rangée / Start Colonne / End Rangée / End Colonne

DéfinitionPositionner dans une zone

Zone

Comme pour les cellules, une zone est définie par deux lignes de colonne et deux lignes de rangée.

1
#div3 {
2
									grid-column-start: 1;
3
									grid-column-end: 3;
4
									grid-row-start: 2;
5
									grid-row-end: 4;
6
									}

Le contenu 3 se retrouve dans la zone d’intersection des cellules de première et deuxième colonne et de deuxième et troisième ligne.

Contenu 1
Contenu 2
Contenu 3
Contenu 4
Contenu 5
Contenu 6
Contenu 7
Contenu 8
Contenu 9
grid-area

Écriture raccourcie

1
#div3 {
2
									grid-column: 1 / 3;
3
									grid-row: 2 / 4;
4
									}

Ou encore

1
#div3 {
2
									grid-area: 2 / 1 / 4 / 3;
3
									}

DéfinitionPositionnement Horizontal

On peut imposer le nombre de rangées, le nombre de colonnes dépend du nombre de blocs.

1
main {
2
									display: grid;
3
									grid-template-rows: repeat(2, 100px);
4
									grid-auto-flow: column;
5
									grid-auto-columns: 100px;
6
									}

Les blocs sont positionnés de haut en bas et de la gauche vers la droite.

Contenu 1
Contenu 2
Contenu 3
Contenu 4
Contenu 5
Contenu 6
Contenu 7
Contenu 8
Contenu 9
grid-area