Les différentes mise en pages sont présentées dans la partie Fondamentaux.
Usage
Vous pouvez utiliser les classes CSS suivantes pour vos grilles.
dsa-grid-container
|
Largeur d’écran |
Nombre de colonnes |
Gap |
Marge horizontale |
|---|---|---|---|
|
0 à 599px |
4 |
16px |
16px |
|
600 à 904px |
8 |
24px |
24px |
|
905 à 1239px |
12 |
24px |
24px |
|
1240 à 1439px |
12 |
24px |
48px |
|
1440px et au delà |
12 |
24px |
48px |
dsa-grid-gutter
A ajouter en plus de dsa-grid-container pour limiter la largeur des colonnes.
|
Largeur d’écran |
Apparence |
|---|---|
|
0 à 599px |
N/A |
|
600 à 904px |
N/A |
|
905 à 1239px |
N/A |
|
1240 à 1439px |
Marge horizontale de 200px |
|
1440px et au delà |
Centré, largeur des colonnes de 72px |
Avec une barre latérale
2 classes à utiliser pour une mise en page avec une barre latérale (ne pas utiliser sur mobile) :
- dsa-sidebar-container, 4 colonnes, largeur 360px
- dsa-grid-container-with-sidebar, une grille a mettre à côté de la barre latérale,
|
Largeur d’écran |
Nombre de colonnes |
Gap |
Marge horizontale |
|---|---|---|---|
|
0 à 1439px |
8 |
24px |
24px |
|
1440px et au delà |
12 (largeur max 56px) |
24px |
auto |