Dans le cours : L'essentiel des CSS

Découvrir les grids - Tutoriel CSS

Dans le cours : L'essentiel des CSS

Démarrer mon mois d’essai gratuit Acheter pour mon équipe

Découvrir les grids

“

L'une des choses qu'on n'a pas encore réussi à réaliser, c'est de placer des éléments côte à côte. Cela a d'ailleurs toujours été un vrai problème dans le CSS. Mais ces dernières années, de nouveaux modules du CSS sont apparus et nous avons maintenant accès à des outils très précis et relativement faciles à utiliser pour réaliser la mise en page de nos sites web. L'un de ces modules s'appelle les Grid et je vous propose d'en découvrir le principe de fonctionnement dans cette vidéo. Pour cela je vais me rendre dans ma feuille de style au niveau du style #mainHeader > h1 et je vais retirer ce display: none. Je sauvegarde et regardez, le titre de mon site fait son grand retour. J'ai donc ici trois éléments : mon image, le titre de mon site et ce petit bouton. Et ces trois éléments, je veux les placer côte à côte dans mon en-tête. Petit retour dans le fichier HTML où se trouve mon en-tête, c'est cet élément <header qui commence ici en ligne 11. Et cet élément <header, je vais le considérer comme un grid container, un conteneur de grille. Résultat des courses, ses enfants directs seront de facto considérés comme des grid items, comme des éléments de grille. Quels sont ces enfants directs ? Il y a l'image, le logo. Il y a le <h1>, Le monde en noir & blanc. Il y a la barre de navigation, mais qui est pour le moment invisible sur les petits écrans des smartphones. Et puis il y a mon bouton. Autrement dit, les trois éléments que je veux placer côte à côte sont précisément les trois éléments visibles qui sont enfants directs de cet élément <header>. Allons-y dans ma feuille de style. Je vais parler à #mainHeader et lui dire display: grid. Mon #mainHeader est maintenant un conteneur de grille, un grid-container et mes trois éléments sont maintenant des éléments de grille, des grid-items. C'est très joli tout ça, mais rien n'a changé sur l'écran. C'est vrai, sur l'écran rien n'a changé. Mais il y a quelque chose de très important qui s'est passé, c'est que maintenant mon <header> est une grille. Je vais pouvoir découper cette grille en colonnes. Pour ça, je vais utiliser la propriété CSS grid-template-columns. J'ai besoin ici de 3 colonnes, une pour chacun de mes trois éléments. La première colonne aura une largeur de 80 px. Cette première colonne, c'est pour le logo, et rappelez-vous que le logo a précisément une largeur de 80 px. Ma deuxième colonne, c'est celle dans laquelle je vais mettre le titre du site, Le monde en noir & blanc. Elle aura une largeur de une fraction, je vais revenir sur cette unité de mesure dans quelques instants. La troisième colonne, celle dans laquelle j'ai envie de mettre mon petit bouton, aura une largeur de 40 px, puisque rappelez-vous que mon petit bouton, #menuToggle, a une largeur de 40 pixels. Donc ici j'ai découpé ma grille, mon <header>, en 3 colonnes, première colonne de dernière colonne de 40 px pour le bouton et une fraction ici au milieu qui représente tout le reste de l'espace disponible. Ҫa veut dire que 1fr, ça vaudra plus ou moins de largeur en fonction de la largeur de l'écran. Je m'assure que la première colonne de ma grille fera toujours 80 px, la dernière toujours 40 px et le reste de l'espace, ce sera pour la colonne du milieu. Je sauvegarde et voilà le travail, mes trois éléments sont maintenant côte à côte dans mon <header>. Je me rends compte que mon titre h1 est écrit en un petit peu trop grand. On va limiter un peu sa taille de caractères, je vais mettre 1em. Et voilà, mon en-tête est maintenant bien placé sur les petits écrans des smartphones.

Table des matières