Est plac automatiquement peut paramtrer placement implicite ligne

principe de conception : ALIGNER !

pour créer de la régularité

6 colonnes	1 col.	5 colonnes
	1 col.	5 colonnes
4 colonnes	4 colonnes	4 colonnes

6 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

<div class="row"> <div class="col m8"> 8 colonnes </div> <div class="col m4"> 4 colonnes </div> </div> <div class="row"> <div class="col m6"> 6 colonnes</div> <div class="col m4"> 4 colonnes</div> <div class="col m2"> 2 colonnes</div> </div>

on se base sur les caractéristiques de la grille
utilisée pour la conception pour calculer les largeurs des différents éléments

dimensionner en % pour avoir des éléments fluides

L1c	L1c	L1c		L1c

width : (8x6,5)+(7x2)= 66 % - margin-left : 2 %

23,5 %

	margin-left : 2 %	margin-left : 2 %

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 colonneprévoir la possibilité de supprimer les goulottes

.col .l2	.col .l2	.col .l2	.col .l2	.col .l2	.col .l2
.col .l4		.col .l10			.col .l2
.col .l4		.col .l8			.col .l2

2%	100%

@media screen and (min-width: 56em) { .m4 { flex-basis: calc( (89% / 12) * 4+ 3%) ;} .m8 { flex-basis: calc( (89% / 12) * 8+ 7%) ;} }

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 grilleimplicitement : 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
