Les colonnes

On peut définir la largeur et le nombre des colonnes

DéfinitionLargeur absolue

1
main {
2
									display: grid;
3
									grid-template-columns: 100px 80px 140px 90px;
4
									}

4 colonnes de largeur différente

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

DéfinitionFraction de largeur (fr)

1
main {
2
									display: grid;
3
									grid-template-columns: 2fr 1fr 3fr;
4
									}

3 colonnes, la première occupe 2 sixièmes de la largeur

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

DéfinitionRépétition

On peut répéter un motif de colonne

1
main {
2
									display: grid;
3
									grid-template-columns: repeat(3, 1fr);
4
									}

3 colonnes de taille identique

Contenu 1
Contenu 2
Contenu 3
Contenu 4
Contenu 5
Contenu 6
Contenu 7
Contenu 8
Contenu 9
grid-template-columns
1
main {
2
									display: grid;
3
									grid-template-columns: repeat(3, 150px 80px);
4
									}

6 colonnes, une de 10px une de 50px 3 fois.

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

DéfinitionCombinaison

1
main {
2
									display: grid;
3
									grid-template-columns: 2fr 100px 1fr;
4
									}
Contenu 1
Contenu 2
Contenu 3
Contenu 4
Contenu 5
Contenu 6
Contenu 7
Contenu 8
Contenu 9
grid-template-columns
1
main {
2
									display: grid;
3
									grid-template-columns: 100px repeat(4, 50px) 1fr 2fr;
4
									}