Exercice 09 - Positionnement CSS Grid

Modalités

À faire (étapes)

Effectuez les opérations demandées

  1. Préparation

    • Créer le dossier « exercice09 » dans votre espace de cours.
    • Transférez les fichiers de votre structure standard dans ce dossier
    • Ajoutez le dossier dans Visual Studio Code
    • Ouvrez le fichier html dans l’éditeur et votre navigateur.
  2. Dans la section head changez le contenu de la balise title, pour :

    • Exercice 09 – Positionnement avec CSS Grid
  3. Dans la section body

    • Ajoutez les balises essentielles header, main et footer à votre HTML
    • Insérez un paragraphe avec un peu de texte dans chacune des sections header, main, footer
    • Ajoutez une balise de section avec une classe nommée pub (<section class="pub">)
  4. Sauvegardez le fichier HTML. (ctrl+s)

  5. Faites afficher le fichier html dans le navigateur.

  6. Ouvrez le fichier CSS sous css/main.css

  7. Inscrivez les lignes suivantes (remplacez Mon Nom avec votre nom) :

    /* Auteur : Mon Nom */
    * {
        box-sizing: border-box;
    }
    html, body {
        height: 100%;
    }
  8. Sauvegardez le fichier CSS. (ctrl+s)

  9. À l’aide de la propriété background-color, ajoutez des couleurs de fond différentes à vos 4 sections header, main, section.pub et footer

  10. Sauvegardez le fichier CSS. (ctrl+s)

  11. Testez dans le navigateur vos couleurs.

  12. Entourez vos 4 sections d’une balise div avec la classe container

    • Cette division contiendra votre site, peu importe sa largeur
    • Votre code HTML devrait avoir la forme suivante

      L’indentation est importante, car elle aide à mieux comprendre la structure de votre page !
  13. Sauvegardez le fichier HTML. (ctrl+s)

  14. De retour dans le fichier CSS, inscrivez les lignes suivantes

    div.container {
        display: grid; /* transforme le conteneur en type grid */
        max-width: 1120px; /*défini la largeur maximale du site */
        height: 100%; /* va ajuster la hauteur du site */
        margin: 0 auto; /* permet de centrer le site dans la page */
    }
  15. Sauvegardez le fichier CSS. (ctrl+s)

  16. Testez dans le navigateur vos changements.

  17. Dans chacune de vos sections du fichier CSS ajoutez les propriétés suivantes :

    • header => grid-area : header;
    • main => grid-area : main ;
    • section.pub => grid-area : pub ;
    • footer => grid-area : footer;
      Ces propriétés vont indiquer à CSS Grid l’identification de vos sections pour qu’il puisse les reconnaître par la suite. Je vous recommande d’utiliser les mêmes noms de balises ou le nom de la classe de section.
  18. Inscrivez les lignes suivantes dans la div.container du fichier CSS****

        grid-template-rows: 300px 1fr 100px;
        grid-template-columns: 1fr 2fr;
        grid-template-areas:
        "header header"
        "pub main"
        "footer footer";
  19. Testez dans le navigateur, vous devriez avoir des résultats !

  20. Faites des changements de valeurs pour la propriété suivante:

    grid-template-columns : 1fr 2fr ;

    Valeurs intéressantes à tester :

    • Pourcentage ex: 33.333% 66.666% ;
    • vh, vw ex: 30vw 70vw;
    • pixel ex: 400px 720px;

    Ressource sur les CSS Units

  21. EXPERTS: Modifier grid-template-areas pour que la zone de publicité prenne la place suivante :

  22. Conservez cet exercice, il pourrait grandement vous aider pour le travail pratique 01 !

Pour aller plus loin…

On peut utiliser CSS Grid pour faire du positionnement complexe d’en-tête.

  1. Ajoutez le code HTML suivant dans votre en-tête header
    <header>
        <section class="identification">
            <a href="/">
                <img src="https://via.placeholder.com/100" alt="logo">
            </a>
            <h1>Exercice 09 – Positionnement avec CSS Grid</h1>
        </section>
        <section class="navigation">
            <nav>
                <ul>
                    <li><a href="/">Accueil</a></li>
                    <li><a href="infos.html"></a>Infos</li>
                    <li><a href="contact.html"></a>Contact</li>
                </ul>
            </nav>
        </section>
        <section class="recherche">
            <form action="" method="post">
                <input type="text" name="txt_recherche" id="txt_recherche">
                <input type="submit" value="Envoyer">
            </form>
        </section>
    </header>
  2. Rendez votre header en mode grid avec la propriété display : grid ;
  3. Définissez chaque section de votre en-tête avec des grid-area
  4. Utilisez des background-color pour bien voir vos sections.
  5. Utilisez les propriétés de rows, columns et areas pour construire un en-tête de ce genre :