Pepper & Carrot : Grid [CSS29]

Cet exercice consiste à composer les différentes pages d’une bande dessinée en utilisant le système de grille de CSS.

Les images utilisées pour cet exercice sont issues du webcomic Pepper & Carrot de David Revoy distribué sous licence Creative Commons Attribution 4.0.

Lisez l’épisode complet : Le concours de potion

Consignes de l’exercice

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

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

<!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-css29.css contenant la structure de base d’une page web. Si vous connaissez le langage SCSS, utilisez-le.

Associez le fichier grid-css29.css à la page HTML.

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

Téléchargez toutes les images nécessaires pour l’exercice et placez-les dans un dossier nommé images à l’intérieur de votre dossier racine.

Images de l’exercice

Aide pour télécharger un fichier :
– Pour télécharger un fichier, faites un clic droit sur le fichier désiré et choisissez l’option Télécharger.
– Pour télécharger plusieurs fichiers, sélectionnez les fichiers désirés puis cliquez sur Télécharger les sélectionnés. Les fichiers seront téléchargés sous la forme d’une archive .zip. Veillez à bien extraire le contenu de l’archive avant de commencer à travailler.

En utilisant le système Grid de CSS, construisez la première page de la BD en respectant les consignes suivantes :

Les dimensions des images sont indiquées dans les noms des fichiers.
Les gouttières sont réglées à 16px.

<div class="page page1">
    <img src="images/page01_img01_800x678.jpg" class="img1">
    <img src="images/page01_img02_800x212.jpg" class="img2">
    <img src="images/page01_img03_800x212.jpg" class="img3">
</div>

.page {
  border: 1px solid #aaa;
  display: grid;
  gap: 16px ;
  width: 800px;
  margin: 15px;
  padding: 15px;
}
.page1 {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, auto);
}

En utilisant le système Grid de CSS, construisez la seconde page de la BD en respectant les consignes suivantes :

Les dimensions des images sont indiquées dans les noms des fichiers.
Les gouttières horizontales sont réglées à 16px et les gouttières verticales sont réglées à 12px.

<div class="page page2">
    <img src="images/page02_img01_800x558.jpg" class="img1">
    <img src="images/page02_img02_394x195.jpg" class="img2">
    <img src="images/page02_img04_800x349.jpg" class="img4">
</div>

.page {
  border: 1px solid #aaa;
  display: grid;
  gap: 16px 12px;
  width: 800px;
  margin: 15px;
  padding: 15px;
}
.page2 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
}
.page2 .img1, 
.page2 .img4 {
  grid-column-end: span 2;
}

$gap-column: 12px ;
$gap-row: 16px ;

.page {
    border: 1px solid #aaa;
    display: grid;
    gap: $gap-row $gap-column ;
    width: 800px;
    margin: 15px;
    padding: 15px;
}
.page2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    .img1, .img4 {
        grid-column-end: span 2;
    }
}

En utilisant le système Grid de CSS, construisez la troisième page de la BD en respectant les mêmes consignes que précédemment.

.page {
  border: 1px solid #aaa;
  display: grid;
  gap: 16px 12px;
  width: 800px;
  margin: 15px;
  padding: 15px;
}
.page3 {
  grid-template-columns: 216px 208px auto;
  grid-template-rows: repeat(4, auto);
}
.page3 .img1, 
.page3 .img2, 
.page3 .img6 {
  grid-column-end: span 3;
}

$gap-column: 12px ;
$gap-row: 16px ;

.page {
    border: 1px solid #aaa;
    display: grid;
    gap: $gap-row $gap-column ;
    width: 800px;
    margin: 15px;
    padding: 15px;
}
.page3 {
    grid-template-columns: 216px 208px auto ;
    grid-template-rows: repeat(4, auto);
    .img1, .img2, .img6 {
        grid-column-end: span 3;
    }
}

En utilisant le système Grid de CSS, construisez la quatrième et dernière page de la BD en respectant les mêmes consignes que précédemment.

.page {
  border: 1px solid #aaa;
  display: grid;
  gap: 16px 12px;
  width: 800px;
  margin: 15px;
  padding: 15px;
}
.page4 {
  grid-template-columns: 294px 254px auto;
  grid-template-rows: 134px 260px 25px 282px auto;
}
.page4 .img2 {
  grid-row-start: 2;
  grid-row-end: span 2;
}
.page4 .img3 {
  grid-row-start: 1;
  grid-column-start: 2;
  grid-column-end: span 2;
}
.page4 .img4 {
  grid-row-start: 1;
  grid-column-start: 3;
  grid-column-end: span 2;
}
.page4 .img5 {
  grid-row-start: 4;
}
.page4 .img6 {
  grid-row-start: 3;
  grid-row-end: span 3;
  grid-column-start: 2;
  grid-column-end: span 2;
}
.page4 .img7 {
  grid-row-start: 5;
  grid-column-start: 1;
  grid-column-end: span 3;
}

$gap-column: 12px ;
$gap-row: 16px ;

.page {
    border: 1px solid #aaa;
    display: grid;
    gap: $gap-row $gap-column ;
    width: 800px;
    margin: 15px;
    padding: 15px;
}
.page4 {
    grid-template-columns: 294px 254px auto ;
    grid-template-rows: 134px (410px - 134px - $gap-row) (134px + 301px - 410px) 282px auto  ;
    .img2 {
        grid-row-start: 2;
        grid-row-end: span 2;
    }
    .img3 {
        grid-row-start: 1;
        grid-column-start: 2;
        grid-column-end: span 2;
    }
    .img4 {
        grid-row-start: 1;
        grid-column-start: 3;
        grid-column-end: span 2;
    }
    .img5 {
        grid-row-start: 4;
    }
    .img6 {
        grid-row-start: 3;
        grid-row-end: span 3 ;
        grid-column-start: 2;
        grid-column-end: span 2;
    }
    .img7 {
        grid-row-start: 5;
        grid-column-start: 1;
        grid-column-end: span 3;
    }
}