Grid
Le conteneur grid (colonnes, lignes, unité fr, repeat, gap, zones nommées) et le placement des enfants (grid-column, grid-row, span) : lire une grille, calculer ses colonnes et choisir entre grid et flexbox.
- 26 cartes
- 6 thèmes
- Gratuit
Le programme, thème par thème
Le poids de chaque thème suit celui que lui donne l'examen.
- Notions
- Questions
- Ranger et relier
- Les chiffres
- Mises en situation
- Comprendre
Quelques cartes du deck
Conteneur de grille : de quoi s'agit-il ?
Voir la réponse
Élément dont la propriété display vaut grid : ses enfants directs deviennent des éléments de grille, rangés dans des colonnes et des lignes à deux dimensions.
Seuls les enfants directs sont placés dans la grille. Les petits-enfants restent dans leur élément parent, comme dans une mise en page ordinaire.
Quelles colonnes occupe cet élément de grille ?
```css
.photo { grid-column: 2 / 4; }`- Les colonnes 2 et 3
- Les colonnes 2, 3 et 4
- Les colonnes 3 et 4
- Seulement la colonne 4
Voir la réponse
Les colonnes 2 et 3
2 / 4va de la ligne 2 à la ligne 4. La ligne de fin n'est pas incluse : il manque la colonne 4, qui commence à la ligne 4.repeat(4, 1fr)crée … colonnes de largeur égale, qui se partagent l'… du conteneur.Voir la réponse
repeat(4, 1fr)crée quatre colonnes de largeur égale, qui se partagent l'espace libre du conteneur.repeat(4, 1fr)est une écriture courte de1fr 1fr 1fr 1fr; le premier argument est le nombre de répétitions.Unité fr : de quoi s'agit-il ?
Voir la réponse
Unité de grille qui représente une part de l'espace libre : ce qui reste du conteneur une fois retirés les colonnes de taille fixe et les gouttières.
Avec
200px 1fr 2frdans 800 px sans gap, il reste 600 px à partager en 3 parts : 200 px et 400 px.