grille 3*3
grille 4
grille 3
Nous en concluons que le système de quadrillage est largement répandu.
Inspecter
Prenez le temps d'examiner https://getbootstrap.com/docs/4.3/examples/
Nous allons tenter de comprendre les noms donnés aux classes
col-sm-6 col-md-4 col-xl-3 mb-3
Réflexion :
Quel serait le "meilleurs" découpage en nombre de colonnes de même taille pour un maximum de flexibilité ?- 5
- 8
- 12
- 20
Pour la premier proposition, nous ne pourrons faire 4 colonnes de même taille !
Pour la proposition de 8 colonnes, il serait impossible de faire trois colonnes de même taille !
Pour la proposition avec laquelle nous aurons 12 colonnes, nous savons que 2,3,4 sont des multiples de 12. Par exemple, nous pouvons faire deux colonnes de même taille. Chacun de ces deux colonnes aurait 6 fois la taille de base.
Pour la dernière proposition, 20 n'est pas un multiple de 3, il serait impossible de faire trois colonnes de même taille.
Ainsi, la plus part des frameworks utilise une grille de 12 !
les chiffres dans les codes col-sm-6 col-md-4 col-xl-3 mb-3 indiquent le nombre de colonnes de base.
Pour aller plus loin
.col-xl-3
- flex: 0 0 25%;
- max-width: 25%;
Ainsi le -3 correspond à 3 colonnes sur 12. Ce qui représente 25% de la taille. On a donc 4 exemples de taille 3 colonnes par ligne.
