Est plac automatiquement peut paramtrer placement implicite ligne
|
---|
principe de conception : ALIGNER !
pour créer de la régularité
6 colonnes | 1 col. |
|
---|---|---|
4 colonnes | 4 colonnes | 4 colonnes |
|
---|
|
||
---|---|---|
|
6 colonnes |
nombre de colonnes : 12, 16, 24
largeur des gouttières (gutter) : 0 , 2%, 1em
|
---|
utiliser le mode de positionnement css grid
|
---|
principe : la grille est fournie sous la forme de classes css prédéfinies que l'on insère dans le document html
12 colonnes, largeur 100 %, gutter 0
|
---|
|
---|
on se base sur les caractéristiques de la grille
utilisée pour la conception pour calculer les largeurs des différents élémentsdimensionner en % pour avoir des éléments fluides
L1c | L1c | L1c | L1c |
---|
width : (8x6,5)+(7x2)= 66 % - margin-left : 2 %
23,5 % |
||
---|---|---|
|
|
2% | 100% |
---|
|
---|
|
---|
|
---|
les gouttières peuvent être réalisées :
avec des marges appliquées à gauche de chaque élément colonne
avec du padding à l'intérieur des éléments colonneprévoir la possibilité de supprimer les goulottes
.col .l2 | .col .l2 | .col .l2 | .col .l2 | .col .l2 | .col .l2 |
---|---|---|---|---|---|
.col .l4 |
|
.col .l2 | |||
|
2% | 100% |
---|
|
---|
|
---|
|
---|
mode de placement basé sur la définition d'1 grille
Le conteneur définit la structure de la grille
nbre et largeur des colonnes
nbre et hauteur des lignes
les items sont placés sur cette grille :
explicitement : on précise le rectangle occupé par l'item sur la grilleimplicitement : on précise uniquement la taille de l'item, et il est placé automatiquement
on peut paramétrer le placement implicite :
en ligne, en colonne, occupation maximale