Grid Layout : interfaces web CSS32

Publié le par Julien Crego
Mise à jour le

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>Titre de la page</title>
    </head>
    <body>

    </body>
</html>

Dans votre dossier racine, créez un nouveau fichier CSS sous le nom grid-css32.css. Si vous connaissez le langage SCSS, favorisez ce langage.

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

Afficher la solution

Solution :

Code à placer dans l’en-tête de la page HTML en personnalisant la valeur de l’attribut href si nécessaire afin qu’elle corresponde à l’emplacement et au nom du fichier CSS.

<link  rel="stylesheet" type="text/css" href="style.css">

Première interface

HTML : Dans la page HTML, ajoutez un élément <div></div> (qui sera le conteneur principal ou la grille) accompagné de quatre enfants de type <div></div> (les enfants doivent être placés dans le conteneur principal). Les enfants doivent contenir respectivement les textes « En-tête », « Menu », « Contenu » et « Pied de page ».

Afficher la solution HTML

Solution HTML :

<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 et créer des paragraphes <p></p>.

Afficher la solution HTML

Solution HTML :

<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 cinq éléments <div></div> créés à la question précédente.

Afficher la solution HTML

Solution HTML :

<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 CSS

Solution CSS :

.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 les propriétés CSS

Propriétés CSS :

display

Afficher la solution CSS

Solution CSS :

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

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

Aperçu de l'interface 1
Afficher les propriétés CSS

Propriétés CSS :

grid-template-rows

Afficher la solution CSS

Solution CSS :

Il suffit juste ici de déterminer les hauteurs des 4 lignes de notre grille.

.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. Pour tester, faites varier la largeur de la fenêtre de votre navigateur, sinon vous risquez de croire que cela ne fonctionne pas...

Interface 1 avec le contenu dimensionné
Afficher les propriétés CSS

Propriétés CSS :

max-width min-width margin

Afficher la solution CSS

Solution CSS :

L’élément content est un bloc puisqu’il s’agit d’un élément HTML <div>. Il n’a pas de dimensions explicitement précisées dans le code CSS. Il a donc les dimensions par défaut des blocs, c’est-à-dire que sa largeur est de 100% et sa hauteur est auto (elle s’adapte au contenu).

La propriété max-width permet ici de borner la largeur maximale de content. Celui-ci ferra donc 100% de large jusqu’à atteindre la largeur de 1000px. Au delà, si l’on continu à élargir la fenêtre du navigateur, l’élément content ne s’élargira plus et aura une dimension fixe de 1000px.

Sur le même principe, la propriété min-width va permettre d’empêcher l’élément content d’être trop étroit, il aura donc une largeur de 100% mais ne pourra pas faire moins de 500px de large.

Lorsque le bloc content sera moins large que container grâce à max-width, celui-ci sera alors centré grâce aux marges auto placées à gauche et à droite.

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

Ou en version plus courte.

.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 HTML

Solution HTML :

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

CSS : Le conteneur principal est déjà une grille. Ajustez les réglages des lignes et colonnes de la grille pour obtenir la grille suivante :

Grille de la deuxième interface

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

Aperçu de l'interface 2 après dimensionnement de la grille
Afficher les propriétés CSS

Propriétés CSS

grid-template-rows grid-template-columns

Afficher la solution CSS

Solution CSS :

.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 :

Aperçu final de l'interface 2
Afficher les propriétés CSS

Propriétés CSS :

grid-column-start grid-column-end

Afficher la solution CSS

Solution CSS :

Ici, nous utilisons au maximum le positionnement naturel des grid-items (éléments de la grille). Nous avons donc juste besoin de demander aux éléments header et footer de s’étirer sur deux colonnes.

Pour les numéros des lignes, attention à ne pas confondre ligne et rangé !

Numéro des lignes de la grille
Numéro des lignes de la grille
.header {
  background-color: green;
  grid-column-start: 1;
  grid-column-end: 3;
}
.footer {
  background-color: pink;
  grid-column-start: 1;
  grid-column-end: 3;
}

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 HTML

Solution HTML :

<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 : Le conteneur principal est déjà une grille. Ajustez les réglages des lignes et colonnes de la grille pour obtenir la grille suivante :

Grille de l'interface 3
Afficher la solution CSS

Solution CSS :

.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 :

Zones de grille de l'interface 3
Afficher les propriétés CSS

Propriétés CSS :

grid-template-areas

Afficher la solution CSS

Solution CSS :

Nommage des zones de la grille
Noms des cellule de la grille pour délimiter les zones
.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 :

Aperçu de l'interface 3
Afficher les propriétés CSS

Propriétés CSS :

grid-area

Afficher la solution CSS

Solution CSS :

.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 :

Aperçu de l'interface 4
Afficher la solution CSS

Solution CSS :

.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" ;
}

Sauf mention contraire*, l'article Grid Layout : interfaces web [CSS32] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.

S’abonner
Notification pour
guest

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

1 Commentaire
Le plus ancien
Le plus récent Le plus populaire
Commentaires en ligne
Afficher tous les commentaires
Mamadou Lamarana Sow
Mamadou Lamarana Sow
1 année il y a

Certainement l’exercice le plus difficile que j’ai rencontré depuis le début. Heureusement qu’il y a les corrections.

0
Répondre