Grid Layout : interfaces web [CSS32]

Cet exercice consiste à créer des interfaces web variées en utilisant les possibilités offertes par le système de grille de CSS.

Consignes de l’exercice

Mise en place de l’exercice

Créez un dossier de travail (dossier racine) sous le nom exercice-css32.

Dans votre dossier racine, créez un nouveau fichier HTML sous le nom grid-css32.html contenant la structure de base d’une page web.

Afficher la solution

Solution :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
    
    </body>
</html>

Dans votre dossier racine, créez un nouveau fichier CSS sous le nom grid-css32.css contenant la structure de base d’une page web. Si vous connaissez le SCSS, utilisez-le.

HTML : Associez le fichier grid-css32.css à la page HTML.

Afficher la solution

Solution :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel='stylesheet' type='text/css' href='grid-css32.css' media='all' />
    </head>
    <body>
    
    </body>
</html>

Première interface

HTML : Dans la page HTML, ajoutez un élément <div></div> (qui sera le conteneur principal) accompagné de 4 enfants de type <div></div>. Les enfants contenant respectivement les textes “En-tête”, “Menu”, “Contenu” et “Pied de page”.

Afficher la solution

Solution :

<div>
    <div>En-tête</div>
    <div>Menu</div>
    <div>Contenu</div>
    <div>Pied de page</div>
</div>

HTML : Ajoutez plusieurs paragraphes de texte à la place du texte “Contenu”. Vous pouvez pour cela utiliser du Lorem Ipsum.

Afficher la solution

Solution :

<div>
    <div>En-tête</div>
    <div>Menu</div>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Suspendisse et condimentum sapien. Maecenas tincidunt 
        dapibus felis id feugiat. Quisque non nibh ac diam 
        blandit aliquam id non nisi. Cras fringilla tincidunt 
        nulla ac vehicula. Nunc blandit nibh a sem placerat 
        bibendum. Ut tempus lorem ac elit lobortis sodales. 
        Donec non augue ex. Duis eget nisl ut mauris rutrum 
        tincidunt. In faucibus elit et ex tincidunt egestas. 
        Maecenas vel diam non est vehicula dapibus. Sed 
        porttitor, urna non finibus consectetur, elit augue 
        tristique nibh, non tincidunt nisl quam vitae ante. 
        Morbi eu ipsum pulvinar, sodales nulla eu, sagittis 
        leo. Donec tincidunt tempus semper. Suspendisse 
        imperdiet iaculis mi, vitae porttitor odio rutrum 
        quis.</p>

        <p>Nunc tempor molestie ligula, et aliquet nibh
        malesuada ut. Morbi sagittis purus sit amet
        nulla cursus tempus. Etiam vel libero non odio
        pulvinar tincidunt eget non velit. Sed aliquam
        elit purus, eu sodales quam facilisis sit amet.
        Class aptent taciti sociosqu ad litora torquent
        per conubia nostra, per inceptos himenaeos. 
        Pellentesque porta lacus vel diam suscipit posuere.
        Nunc non lectus consectetur magna accumsan gravida.
        Praesent imperdiet ante eget nisl ullamcorper, 
        quis vulputate nulla pretium. Nullam nec commodo
        quam, non lacinia diam. Sed lobortis volutpat 
        purus, sed laoreet tellus venenatis quis. Aenean
        dapibus interdum tincidunt. Phasellus vitae elit
        orci. Nulla facilisi. Pellentesque fringilla ac 
        ex ut lacinia. Sed aliquet, ipsum et dictum lacinia,
        velit nisl mollis ipsum, eu convallis nisl mi sit
        amet eros. Mauris varius, purus a elementum posuere,
        urna ex sodales nulla, venenatis blandit lacus sapien
        quis ligula.</p>
      
        <p>In rhoncus velit magna, at interdum ante imperdiet
        in. Nullam placerat ipsum at neque commodo, vitae
        semper dui rutrum. Nam ultricies quis libero vel
        ultricies. Quisque rhoncus suscipit arcu non
        accumsan. Donec blandit feugiat mauris, vitae aliquet
        erat molestie eu. Integer condimentum gravida mi id
        vehicula. Mauris quis mauris interdum erat aliquet 
        lacinia at in urna. Nunc egestas sem mauris, a accumsan
        dui efficitur vitae. Phasellus viverra ultricies arcu.
        Cras lobortis arcu sed nunc cursus dignissim. Curabitur
        dictum, lorem sed fringilla interdum, dolor magna rutrum
        diam, ut faucibus odio metus id nunc. Sed fringilla 
        ultrices nibh, et eleifend turpis commodo a. Cras vel mi
        vel lectus semper venenatis. Mauris scelerisque eget orci
        id gravida. Morbi at dui eu libero mollis semper eget id 
        eros. Aenean ac lorem nec diam vulputate dapibus.</p>
    </div>
    <div>Pied de page</div>
</div>

HTML : Ajoutez les classes CSS qui vous permettront par la suite de cibler chacun des 5 éléments <div></div> créés à la question précédente.

Afficher la solution

Solution :

<div class="container">
    <div class="header">En-tête</div>
    <div class="menu">Menu</div>
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Suspendisse et condimentum sapien. Maecenas tincidunt 
        dapibus felis id feugiat. Quisque non nibh ac diam 
        blandit aliquam id non nisi. Cras fringilla tincidunt 
        nulla ac vehicula. Nunc blandit nibh a sem placerat 
        bibendum. Ut tempus lorem ac elit lobortis sodales. 
        Donec non augue ex. Duis eget nisl ut mauris rutrum 
        tincidunt. In faucibus elit et ex tincidunt egestas. 
        Maecenas vel diam non est vehicula dapibus. Sed 
        porttitor, urna non finibus consectetur, elit augue 
        tristique nibh, non tincidunt nisl quam vitae ante. 
        Morbi eu ipsum pulvinar, sodales nulla eu, sagittis 
        leo. Donec tincidunt tempus semper. Suspendisse 
        imperdiet iaculis mi, vitae porttitor odio rutrum 
        quis.</p>

        <p>Nunc tempor molestie ligula, et aliquet nibh
        malesuada ut. Morbi sagittis purus sit amet
        nulla cursus tempus. Etiam vel libero non odio
        pulvinar tincidunt eget non velit. Sed aliquam
        elit purus, eu sodales quam facilisis sit amet.
        Class aptent taciti sociosqu ad litora torquent
        per conubia nostra, per inceptos himenaeos. 
        Pellentesque porta lacus vel diam suscipit posuere.
        Nunc non lectus consectetur magna accumsan gravida.
        Praesent imperdiet ante eget nisl ullamcorper, 
        quis vulputate nulla pretium. Nullam nec commodo
        quam, non lacinia diam. Sed lobortis volutpat 
        purus, sed laoreet tellus venenatis quis. Aenean
        dapibus interdum tincidunt. Phasellus vitae elit
        orci. Nulla facilisi. Pellentesque fringilla ac 
        ex ut lacinia. Sed aliquet, ipsum et dictum lacinia,
        velit nisl mollis ipsum, eu convallis nisl mi sit
        amet eros. Mauris varius, purus a elementum posuere,
        urna ex sodales nulla, venenatis blandit lacus sapien
        quis ligula.</p>
      
        <p>In rhoncus velit magna, at interdum ante imperdiet
        in. Nullam placerat ipsum at neque commodo, vitae
        semper dui rutrum. Nam ultricies quis libero vel
        ultricies. Quisque rhoncus suscipit arcu non
        accumsan. Donec blandit feugiat mauris, vitae aliquet
        erat molestie eu. Integer condimentum gravida mi id
        vehicula. Mauris quis mauris interdum erat aliquet 
        lacinia at in urna. Nunc egestas sem mauris, a accumsan
        dui efficitur vitae. Phasellus viverra ultricies arcu.
        Cras lobortis arcu sed nunc cursus dignissim. Curabitur
        dictum, lorem sed fringilla interdum, dolor magna rutrum
        diam, ut faucibus odio metus id nunc. Sed fringilla 
        ultrices nibh, et eleifend turpis commodo a. Cras vel mi
        vel lectus semper venenatis. Mauris scelerisque eget orci
        id gravida. Morbi at dui eu libero mollis semper eget id 
        eros. Aenean ac lorem nec diam vulputate dapibus.</p>
    </div>
    <div class="footer">Pied de page</div>
</div>

CSS : Ajoutez des couleurs d’arrière-plan différentes pour les différents éléments afin de pouvoir les identifier visuellement.

Afficher la solution

Solution :

.container {
  background-color: red;
}
.header {
  background-color: green;
}
.menu{
  background-color: aqua;
}
.content {
  background-color: yellow;
}
.footer {
  background-color: pink;
}

CSS : Transformez le conteneur principal en élément de type grille

Afficher la liste des propriétés CSS Afficher la solution

Solution :

.container {
  background-color: red;
  display: grid;
}

CSS : Réglez la grille pour obtenir un résultat sensiblement identique à l’illustration suivante :

Afficher la liste des propriétés CSS Afficher la solution

Solution :

.container {
  background-color: red;
  display: grid;
  grid-template-rows: 100px 40px auto 40px ; 
}

CSS : Réglez la largeur du contenu principal afin d’éviter d’avoir des lignes trop larges ou au contraire trop étroites.

Afficher la liste des propriétés CSS Afficher la solution

Solution :

.content {
  background-color: yellow;
  max-width: 1000px;
  min-width: 500px;
  margin: 0 auto;
}

Deuxième interface

Dupliquez la page HTML et le fichier CSS, renommez les copies sous les noms grid-css32-2.html et grid-css32-2.css.

HTML : Dans la nouvelle page que vous venez de créer, pensez à modifiez le nom du fichier CSS.

Afficher la solution

Solution :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel='stylesheet' type='text/css' href='exo-css32-2.css' media='all' />
    </head>

CSS : Transformez le conteneur principal en grille.

CSS : Dimensionnez les lignes et colonnes de la grille pour obtenir la grille suivante :

Vous devriez avoir à l’écran la disposition suivante :

Aperçu de l'interface 2 après dimensionnement de la grille

Afficher la liste des propriétés CSS Afficher la solution

Solution :

.container {
  background-color: red;
  display: grid;
  grid-template-columns: 200px auto ;
  grid-template-rows: 100px auto 40px ; 
}

CSS : Disposez les différents éléments dans la grille pour obtenir le résultat suivant :

Afficher la liste des propriétés CSS Afficher la solution

Solution :

.header {
  background-color: green;
  grid-column-start: 1;
  grid-column-end: span 2;
}
.footer {
  background-color: pink;
  grid-column-start: 1;
  grid-column-end: span 2;
}

Troisième interface

Dupliquez la page HTML et le fichier CSS, renommez-les copies sous les noms grid-css32-3.html et grid-css32-3.css.

HTML : Dans la nouvelle page web, en dessous de l’élément contenant le texte “Pied de page”, ajoutez deux nouveaux éléments <div></div> contenant respectivement les textes “Colonne gauche ” et “Colonne droite” et ajoutez-leur des classes CSS.

Afficher la solution

Solution :

<div class="container">
    <div class="header">En-tête</div>
    <div class="menu">Menu</div>
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Suspendisse et condimentum sapien. Maecenas tincidunt 
        dapibus felis id feugiat. Quisque non nibh ac diam 
        blandit aliquam id non nisi. Cras fringilla tincidunt 
        nulla ac vehicula. Nunc blandit nibh a sem placerat 
        bibendum. Ut tempus lorem ac elit lobortis sodales. 
        Donec non augue ex. Duis eget nisl ut mauris rutrum 
        tincidunt. In faucibus elit et ex tincidunt egestas. 
        Maecenas vel diam non est vehicula dapibus. Sed 
        porttitor, urna non finibus consectetur, elit augue 
        tristique nibh, non tincidunt nisl quam vitae ante. 
        Morbi eu ipsum pulvinar, sodales nulla eu, sagittis 
        leo. Donec tincidunt tempus semper. Suspendisse 
        imperdiet iaculis mi, vitae porttitor odio rutrum 
        quis.</p>

        <p>Nunc tempor molestie ligula, et aliquet nibh
        malesuada ut. Morbi sagittis purus sit amet
        nulla cursus tempus. Etiam vel libero non odio
        pulvinar tincidunt eget non velit. Sed aliquam
        elit purus, eu sodales quam facilisis sit amet.
        Class aptent taciti sociosqu ad litora torquent
        per conubia nostra, per inceptos himenaeos. 
        Pellentesque porta lacus vel diam suscipit posuere.
        Nunc non lectus consectetur magna accumsan gravida.
        Praesent imperdiet ante eget nisl ullamcorper, 
        quis vulputate nulla pretium. Nullam nec commodo
        quam, non lacinia diam. Sed lobortis volutpat 
        purus, sed laoreet tellus venenatis quis. Aenean
        dapibus interdum tincidunt. Phasellus vitae elit
        orci. Nulla facilisi. Pellentesque fringilla ac 
        ex ut lacinia. Sed aliquet, ipsum et dictum lacinia,
        velit nisl mollis ipsum, eu convallis nisl mi sit
        amet eros. Mauris varius, purus a elementum posuere,
        urna ex sodales nulla, venenatis blandit lacus sapien
        quis ligula.</p>
      
        <p>In rhoncus velit magna, at interdum ante imperdiet
        in. Nullam placerat ipsum at neque commodo, vitae
        semper dui rutrum. Nam ultricies quis libero vel
        ultricies. Quisque rhoncus suscipit arcu non
        accumsan. Donec blandit feugiat mauris, vitae aliquet
        erat molestie eu. Integer condimentum gravida mi id
        vehicula. Mauris quis mauris interdum erat aliquet 
        lacinia at in urna. Nunc egestas sem mauris, a accumsan
        dui efficitur vitae. Phasellus viverra ultricies arcu.
        Cras lobortis arcu sed nunc cursus dignissim. Curabitur
        dictum, lorem sed fringilla interdum, dolor magna rutrum
        diam, ut faucibus odio metus id nunc. Sed fringilla 
        ultrices nibh, et eleifend turpis commodo a. Cras vel mi
        vel lectus semper venenatis. Mauris scelerisque eget orci
        id gravida. Morbi at dui eu libero mollis semper eget id 
        eros. Aenean ac lorem nec diam vulputate dapibus.</p>
    </div>
    <div class="footer">Pied de page</div>
    <div class="aside-left">Colonne gauche</div>
    <div class="aside-right">Colonne droite</div>
</div>

CSS : Ajoutez une couleur d’arrière-plan aux deux nouveaux éléments que vous venez de créer.

CSS : Transformez le nouveau conteneur principal en grille.

CSS : Dimensionnez les lignes et colonnes de la grille pour obtenir la grille suivante :

Afficher la solution

Solution :

.container {
  background-color: red;
  display: grid;
  grid-template-columns: 200px auto 200px;
  grid-template-rows: 100px 40px auto 40px; 
}

CSS : Définissez des zones de grilles afin de correspondre au modèle ci-dessous :

Afficher la liste des propriétés CSS Afficher la solution

Solution :

.container {
  background-color: red;
  display: grid;
  grid-template-columns: 200px auto 200px;
  grid-template-rows: 100px 40px auto 40px;
  grid-template-areas: "header header header"
                       "menu menu menu"
                       "left content right"
                       "footer footer footer" ;
}

CSS : Disposez les différents éléments dans la grille pour obtenir le résultat suivant :

Afficher la liste des propriétés CSS Afficher la solution

Solution :

.header {
  background-color: green;
  grid-area: header;
}
.menu {
  background-color: aqua;
  grid-area: menu;
}
.content {
  background-color: yellow;
  max-width: 1000px;
  min-width: 500px;
  margin: 0 auto;
  grid-area: content;
}
.footer {
  background-color: pink;
  grid-area: footer;
}
.aside-left {
  background-color: darkred;
  grid-area: left;
}
.aside-right {
  background-color: olive;
  grid-area: right;
}

Quatrième interface

Dupliquez la page HTML et le fichier CSS, renommez-les copies sous les noms grid-css32-4.html et grid-css32-4.css.

CSS : Appliquez les modifications nécessaires pour obtenir le résultat suivant :

Afficher la solution

Solution :

.container {
  background-color: red;
  display: grid;
  grid-template-columns: 200px auto auto;
  grid-template-rows: 100px auto auto 40px;
  grid-template-areas: "header header header"
                       "menu content content"
                       "menu left right"
                       "footer footer footer" ;
}