Dans le cours : La mise en page CSS : Combiner les flex et les grids
Accédez au cours complet aujourd’hui
Inscrivez-vous aujourd’hui pour accéder à plus de 23 100 cours dispensés par des experts.
Accrocher des éléments dans la grille - Tutoriel CSS
Dans le cours : La mise en page CSS : Combiner les flex et les grids
Accrocher des éléments dans la grille
Pour le moment, chaque élément de ma grille, chaque grid item, ou dans mon cas, chacun des éléments li de mon ul, occupe une cellule dans la grille que j'ai définie dans la vidéo précédente. Et tout cela s'est fait de manière automatique. Cela dit, vous aurez souvent besoin de mise en page plus complexe, avec des éléments qui s'étalent sur plusieurs cellules de grille. Dans cette vidéo, voyons comment accrocher nos grid-items dans les cellules de la grille. Pour cela, je vais d'abord faire réapparaître ma grille grâce aux outils de développement de mon navigateur. Clic droit n'importe où dans ma page, je clique sur Inspecter. Je bascule ici dans l'onglet Layout, et c'est là que je trouve cette fameuse petite case à cocher qui me permet de voir la grille que j'ai définie au niveau de mon élément ul. Vous voyez ici les différentes cellules de grille. Pour générer les cellules de cette grille, le navigateur a dû générer des grid lines, des lignes de grille. Au niveau des colonnes, nous…
Entraînez-vous tout en suivant la formation avec les fichiers d’exercice.
Téléchargez les fichiers utilisés par l’instructeur pour enseigner le cours. Suivez attentivement et apprenez en regardant, en écoutant et en vous entraînant.
Table des matières
-
-
-
-
-
-
(Verrouillé)
Définir une grille simple4 m 12 s
-
(Verrouillé)
Accrocher des éléments dans la grille5 m 14 s
-
(Verrouillé)
Utiliser grid-template-areas4 m 24 s
-
Utiliser les unités fractionnelles4 m 21 s
-
(Verrouillé)
Découvrir les fonctions repeat() et minmax()4 m 4 s
-
(Verrouillé)
Comprendre les mots-clés auto-fill et auto-fit5 m 37 s
-
(Verrouillé)
-
-
-
-
-