Dans le cours : L'essentiel des CSS

Accédez au cours complet aujourd’hui

Inscrivez-vous aujourd’hui pour accéder à plus de 24 700 cours dispensés par des experts.

Rendre le header responsive avec les grids

Rendre le header responsive avec les grids - Tutoriel CSS

Dans le cours : L'essentiel des CSS

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

Rendre le header responsive avec les grids

“

La puissance et la flexibilité des grilles CSS ne s'arrêtent pas là, parce que maintenant je vais combiner tout cela avec mes media queries. Et ça, ça va me permettre de rendre l'en-tête de mon site entièrement responsive avec quelques petites lignes de code. Alors, quelle est la situation actuelle ? Et bien l'en-tête de mon site, c'est cet élément mainHeader que je considère comme une grille CSS grâce à display: grid. Cette grille, je la découpe en trois colonnes : une première colonne de 80 pixels de large, c'est celle dans laquelle nous trouvons le logo ici, en haut à gauche. La dernière colonne fait 40 pixels de large, et dans cette colonne, nous trouvons le petit bouton que vous voyez ici, en haut à droite, petit bouton qui, sur les écrans les plus étroits, me permettra d'afficher ou de masquer le menu. Et puis il y a la colonne du milieu qui fait une fraction de large. Donc cette colonne prend tout le reste de l'espace disponible. Et dans cette colonne, nous trouvons le titre…

Table des matières