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.

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

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 5 é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 :

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

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 :

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

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 :

.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 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 : Transformez le nouveau conteneur principal en grille.

CSS : Dimensionnez les 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 :

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

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

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