Grid

Tandis qu’une flexbox est unidimensionnelle (les éléments sont disposés en ligne ou en colonne), un grid crée une grille en deux dimensions (les éléments sont disposés librement sur une ligne et colonne). Cela permet de créer des layouts plus complexes, comme par exemple une mosaïque.

JSFiddle grid
JSFiddle grid:hover
Codepen Use grid instead of containers

grid-auto (container)

display: grid
Définit l’élément courant comme une grille [CSS3]
```
display: grid
```
grid-auto-flow
Définit si les enfants sont affichés en ligne ou en colonne (lorsqu’aucun template n’est définit) [CSS3]
```
grid-auto-flow: row | column | dense
```
- row: (par défaut) en ligne
- column: en colonne
- dense: essaie de placer les éléments pour qu’il n’y ait aucun espace vide
Codepen grid-auto-flow: dense
grid-auto-rows
Définit la taille des lignes créées [CSS3]
La fonction minmax() permet de spécifier la taille minimale et maximale de la colonne.
```
grid-auto-rows: <length> | <percent> | <fraction> | minmax()
```

grid-auto-columns
Définit la taille des colonnes créées [CSS3]

grid-auto-columns: <length> | <percent> | <fraction> | minmax()

Exemple:

{
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 60px;
}

{
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(60px, auto);
}

grid-gap (container)

grid-column-gap
Définit les marges entre deux colonnes [CSS3]
```
grid-column-gap: <length> | <percent>
```
grid-row-gap
Définit les marges entre deux lignes [CSS3]
```
grid-row-gap: <length> | <percent>
```

grid-gap
Définit les marges entre deux lignes et deux colonnes [CSS3]

grid-gap: [<length> | <percent>]{1,2}

grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;

Exemple:

{
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 20px;
}

{
  grid-template-columns: repeat(3, 1fr);
  grid-row-gap: 20px;
}

align-items (container)

align-items
Définit l’alignement des éléments sur une ligne [CSS3]
Par défaut, un élément s’étire en hauteur pour remplir la ligne (stretch)
```
align-items: start | end | strech | center
```
justify-items
Définit l’alignement des éléments sur une colonne [CSS3]
Par défaut, un élément s’étire en largeur pour remplir la colonne (stretch)
```
justify-items: start | end | strech | center |
   space-around | space-beteen | space-evenly
```

grid-template (container)

Par défaut, une grid place automatiquement les éléments en colonne et en ligne, dans l’ordre. Plutôt que de définir des colonnes et des lignes, on peut définir des emplacements sur lesquels on pourra par la suite placer les éléments.

grid-template-columns
Définit le nombre de colonnes et leur taille [CSS3]
La fonction repeat() permet de répéter la même définition de colonne plusieurs fois.
```
grid-template-columns: [<length> | <percent> | <fraction> | minmax() | repeat()]+
```
grid-template-rows
Définit le nombre de lignes et leur taille [CSS3]
S’il n’y a pas d’éléments pour remplir les lignes, des espaces vides sont crées
```
grid-template-rows: [<length> | <percent> | <fraction> | minmax() | repeat()]+
```
grid-template-areas
Définit des zones nommées pour placer les enfants [CSS3]
Utiliser “.” pour laisser une colonne vide
```
grid-template-areas: <string>+
```
grid-template
Est un raccourci permettant de définir les colonnes, lignes et zones d’une grille [CSS3]
```
grid-template: (<grid-template-areas> <grid-template-rows>)+ / <grid-template-columns>
```

grid
Est un raccourci permettant de définir toutes les propriétés liées aux grilles CSS [CSS3]

grid: <grid-template> |
<grid-template-rows> / <grid-auto-columns> |
<grid-auto-rows> / <grid-tempalte-columns>

Exemple:

{
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 50px 60px 70px;
}

{
  grid-template-columns: 30% 20% 50%;
}

{
  grid-template-columns: 1fr 2fr 1fr;
}

{
  grid-template-columns: repeat(3, 1fr);
}

.wrapper{
  display: grid;
  grid-template: "head head" 50px  /* height of row 1:  50px */
     "nav  main" 100px   /* height of row 2: 100px */
     "nav  footer" 30px  /* height of row 3:  30px */
     / 120px 1fr;  /* width of columns: 120px and auto */
}
header { grid-area: head; }
nav { grid-area: nav; }
main { grid-area: main; }
footer { grid-area: footer; }

JSFiddle grid-template

grid-area (child)

Définit dans quelle zone afficher l’élément [CSS3]
Zone définie par le container avec grid-template-areas

grid-area: <string>

grid-column (child)

grid-column-start
Définit sur quelle colonne doit être placé l’élément [CSS3]
```
grid-column-start: <number>
```
grid-column-end
Définit sur quelle colonne finit l’élément (non inclue) [CSS3]
```
grid-column-end: <number>
```
grid-column
Est un raccourci pour grid-column-start et grid-column-end [CSS3]
Ou avec la syntaxe span, définit la taille de l’élément et non sa position
```
grid-column: <grid-column-start>/<grid-column-end> | span <number>
```

Exemple:

{
  grid-template-columns: repeat(6, 1fr);

  &:first-child {
    grid-column: 1/3;
  }
}

{
  grid-template-columns: repeat(3, 1fr);

  &:nth-child(2) {
    grid-column: span 2;
  }
}

grid-row (child)

grid-row-start
Définit sur quelle ligne doit être placé l’élément [CSS3]
```
grid-row-start: <number>
```
grid-row-end
Définit sur quelle ligne finit l’élément
```
grid-row-end: <number>
```
grid-row
Est un raccourci pour grid-row-start et grid-row-end [CSS3]
Ou avec la syntaxe span, définit la taille de l’élément et non sa position
```
grid-row: <grid-row-start>/<grid-row-end> | span <number>
```

Exemple:

{
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);

  &:nth-child(2) {
    grid-column-start: 2;
    grid-row: 1/4;
  }
}

align-self (child)

align-self
Définit l’alignement de l’élément sur une ligne [CSS3]
Écrase align-items pour un élément en particulier
```
align-self: start | end | strech | center
```
justify-self
Définit l’alignement de l’élément sur une colonne [CSS3]
```
justify-self: start | end | strech | center
```

Exemple:

{
  grid-template-columns: 1fr 1fr 1fr;

  &:first-child {
    grid-column: 1/3; /* de 1 à 3 */
  }
  &:nth-child(2) {
    grid-column: span 3; /* de n à n+3 (où n est la position par défaut de l'élément) */
  }
}

CSS Grid Guide
A Complete Guide to Grid

This site is open source. Improve this page.