TD — CSS Grid Layout

Exercice 1

Définir une grille de 4 colonnes, différentes largeurs fixées en utilisant différentes unités classiques (px, %, rem) et 5 rangées de différentes hauteurs également fixées.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Exercice 2

Définir une grille de 4 colonnes, avec une colonne de largeur fixée, puis les 3 autres se répartissant l’espace restant :

A égalité

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Avec le rapport 3-2-1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Exercice 3

Réduire le nombre de rangées explicitement prévues à 3. Que se passe-t-il ? Quelle est la taille des rangées ajoutées ? Faire en sorte que les rangées supplémentaires aient une taille fixée.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Ce qui se passe Comme il y a beaucoup d’items, 3 rangées ne suffisent pas.
Le navigateur crée donc des rangées implicites supplémentaires.
Par défaut, ces rangées supplémentaires ont une taille de auto.
Cela signifie que leur hauteur dépend du contenu.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Ce qui se passe Les 3 premières rangées sont explicites : 5rem 5rem 5rem
Les rangées ajoutées automatiquement auront désormais une hauteur de 4rem
C’est précisément le rôle de grid-auto-rows.

Exercice 4

En utilisant repeat(), changer la définition de la grille pour qu’elle soit formée de 5 colonnes identiques occupant tout l’espace disponible, et 3 rangées d’une hauteur de 8rem. Les rangées supplémentaires doivent avoir une taille fixée à 4rem.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Ce qui se passe repeat(5, 1fr) crée 5 colonnes identiques
elles occupent tout l’espace disponible
repeat(3, 8rem) crée 3 rangées explicites
grid-auto-rows: 4rem fixe la hauteur des rangées créées implicitement

A retenir