Styleguide
Retour sommaire

Grille

Grille

Composant de base

Une définition de grille est composée d'un élément .l-grid, puis d'enfants avec une classe .l-grid-item

1
2

Définition du nombre de colones

Ajouter la classe de modification .l-grid-item--XX-XX à l'élément ayant la classe .l-grid-item afin de modifier son nombre de colonnes.

Le dernier nombre de la chaine de caractères (ex : -50) correspond à la largeur en pourcentage (50%).

Nombres de colonnes disponibles :

Taille S - de 480px à 768px

  • .l-grid-item--S-20
  • .l-grid-item--S-25
  • .l-grid-item--S-33
  • .l-grid-item--S-40
  • .l-grid-item--S-50
  • .l-grid-item--S-60
  • .l-grid-item--S-66
  • .l-grid-item--S-75
  • .l-grid-item--S-80

Taille S-UP - sup à 480px

  • .l-grid-item--S-UP-20
  • .l-grid-item--S-UP-25
  • .l-grid-item--S-UP-33
  • .l-grid-item--S-UP-40
  • .l-grid-item--S-UP-50
  • .l-grid-item--S-UP-60
  • .l-grid-item--S-UP-66
  • .l-grid-item--S-UP-75
  • .l-grid-item--S-UP-80

Taille M - de 768px à 1049px

  • .l-grid-item--M-20
  • .l-grid-item--M-25
  • .l-grid-item--M-33
  • .l-grid-item--M-40
  • .l-grid-item--M-50
  • .l-grid-item--M-60
  • .l-grid-item--M-66
  • .l-grid-item--M-75
  • .l-grid-item--M-80

Taille M-UP - sup à 768px

  • .l-grid-item--M-UP-20
  • .l-grid-item--M-UP-25
  • .l-grid-item--M-UP-33
  • .l-grid-item--M-UP-40
  • .l-grid-item--M-UP-50
  • .l-grid-item--M-UP-60
  • .l-grid-item--M-UP-66
  • .l-grid-item--M-UP-75
  • .l-grid-item--M-UP-80

Taille L-UP - sup à 1049px

  • .l-grid-item--L-UP-20
  • .l-grid-item--L-UP-25
  • .l-grid-item--L-UP-33
  • .l-grid-item--L-UP-40
  • .l-grid-item--L-UP-50
  • .l-grid-item--L-UP-60
  • .l-grid-item--L-UP-66
  • .l-grid-item--L-UP-75
  • .l-grid-item--L-UP-80
1
2
3
4
5
6
7
8
9
10
11

Modification d'ordre

Il est possible de mettre un élément de grille en premier en ajoutant la classe .l-grid-itemFirst à un élément .l-grid-item.

1
2

Modification d'espacement

Il est possible de décaler un élément de grille à gauche en ajoutant la classe .l-grid-itemPush à un élément .l-grid-item.

1
2

Centrer les élements

Il est possible de center les éléments .l-grid-item en ajoutant la classe .l-grid--center à l'élément .l-grid.

1
2

Élements enfants de même hauteur

Il est possible de donner la même hauteur aux enfants directs de .l-grid-item en ajoutant la classe .l-grid--equalHeight à l'élément .l-grid.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, numquam nihil incidunt odit illo iusto eaque ratione perspiciatis ut aperiam fugiat, asperiores laboriosam reiciendis dolorem placeat eos laborum! Molestiae, tempore!

Lorem ipsum dolor

Contraindre le non retour à la ligne

Il est possible de contraindre les éléments .l-grid-item à ne pas retourner à la ligne en ajoutant la classe .l-grid--noWrap à l'élément .l-grid.

1
2
3
4
5
6
7