Les colonnes

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

DéfinitionLargeur absolue

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
main {
2
  display: grid;
3
  grid-template-columns: 100px 80px 140px 90px;
4
}
main {
  display: grid;
  grid-template-columns: 100px 80px 140px 90px;
}

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)

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
main {
2
  display: grid;
3
  grid-template-columns: 2fr 1fr 3fr;
4
}
main {
  display: grid;
  grid-template-columns: 2fr 1fr 3fr;
}

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

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
main {
2
  display: grid;
3
  grid-template-columns: repeat(3, 1fr);
4
}
main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

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
num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
main {
2
  display: grid;
3
  grid-template-columns: repeat(3, 150px 80px);
4
}
main {
  display: grid;
  grid-template-columns: repeat(3, 150px 80px);
}

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

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
main {
2
  display: grid;
3
  grid-template-columns: 2fr 100px 1fr;
4
}
main {
  display: grid;
  grid-template-columns: 2fr 100px 1fr;
}
Contenu 1
Contenu 2
Contenu 3
Contenu 4
Contenu 5
Contenu 6
Contenu 7
Contenu 8
Contenu 9
grid-template-columns
num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
main {
2
  display: grid;
3
  grid-template-columns: 100px repeat(4, 50px) 1fr 2fr;
4
}
main {
  display: grid;
  grid-template-columns: 100px repeat(4, 50px) 1fr 2fr;
}