Grid Layout [CSS28] - Web Formation

Cet exercice consiste à explorer les possibilités offertes par le système de grille de CSS.

Consignes de l’exercice

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

Dans votre dossier racine, créez un nouveau fichier HTML sous le nom grid-css28.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-css28.css. Si vous connaissez le langage SCSS, utilisez-le.

Associez le fichier grid-css28.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">

Dans la page HTML, ajoutez un élément <div></div> accompagné de 5 enfants de type <div></div> et contenant chacun le texte « Élément x » où x est le numéro de l’enfant.

<div>
    <div>Élément 1</div>
    <div>Élément 2</div>
    <div>Élément 3</div>
    <div>Élément 4</div>
    <div>Élément 5</div>
</div>

Ajoutez toutes les classes nécessaires pour la manipulation des différents éléments HTML ajoutés à la question précédente. Vous devez pouvoir manipuler les enfants collectivement ou individuellement.

<div class="container">
    <div class="item item1">Élément 1</div>
    <div class="item item2">Élément 2</div>
    <div class="item item3">Élément 3</div>
    <div class="item item4">Élément 4</div>
    <div class="item item5">Élément 5</div>
</div>

En CSS, appliquez une couleur d’arrière-plan différente pour chacun des éléments enfants.

.item1 {
    background-color: #30b16d;
}
.item2 {
    background-color: #2a9d60;
}
.item3 {
    background-color: #258954;
}
.item4 {
    background-color: #1f7548;
}
.item5 {
    background-color: #1a613b;
}

$color: #35c579;

@for $i from 1 through 5 {
    .item#{$i} {
        background-color: darken($color, $i * 5%);
    }
}

En utilisant le système de grille de CSS, sans utiliser de pistes implicites et en réglant la hauteur des lignes sur auto, reproduisez la disposition suivante :

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, auto);
}
.item2 {
    grid-column-start: 3;
}
.item3 {
    grid-row-start: 2;
    grid-column-start: 2;
}
.item4 {
    grid-row-start: 3;
    grid-column-start: 1;
}
.item5 {
    grid-row-start: 3;
    grid-column-start: 3;
}

Ajoutez des gouttières à la grille.

gap

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3,auto);
    gap: 1rem 1rem;
}

Ajustez le réglage des alignements horizontaux des éléments pour obtenir le résultat suivant :

justify-items justify-self

.container {
    display: grid ;
    grid-template-columns: repeat(3, 1fr) ;
    grid-template-rows: repeat(3,auto);
    gap: 1rem 1rem;
    justify-items: left;
}
.item2 {
    grid-column-start: 3;
    justify-self: right;
}
.item3 {
    grid-row-start: 2;
    grid-column-start: 2;
    justify-self: center;
}
.item4 {
    grid-row-start: 3;
    grid-column-start: 1;
}
.item5 {
    grid-row-start: 3;
    grid-column-start: 3;
    justify-self: right;
}

Ajoutez du contenu dans l’élément 5 afin qu’il s’affiche sur plusieurs lignes.

Ajustez le réglage de la grille pour obtenir le résultat suivant :

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 1rem 1rem;
    justify-items: left;
}

Ajustez les réglages de la grille pour utiliser des rangées implicites.

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 1rem 1rem;
    justify-items: left;
}

Modifiez la grille pour lui ajouter des zones nommées et utilisez-les pour obtenir la mise en forme suivante :

.container {
    display: grid;
    grid-template-areas: "zone1 zone1 zone2"
                         "zone3 zone3 zone3"
                         "zone4 zone5 zone5";
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 1rem 1rem;
}
.item1 {
    grid-area: zone1 ;
}
.item2 {
   grid-area: zone2 ;
}
.item3 {
    grid-area: zone4 ;
}
.item4 {
    grid-area: zone5 ;
}
.item5 {
    grid-area: zone3 ;
}

Modifiez le réglage des lignes implicites pour qu’elles aient une hauteur minimale de 50px, mais qu’elles puissent quand même s’agrandir si nécessaire.

.container {
    display: grid;
    grid-template-areas: "zone1 zone1 zone2"
                         "zone3 zone3 zone3"
                         "zone4 zone5 zone5";
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(50px, auto);
    gap: 1rem 1rem;
}

Sauf mention contraire*, l'article Grid Layout [CSS28] et son contenu par Julien Crego sont mis à disposition selon les termes de la 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.