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.

Voici la structure de base d’une page HTML.

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Titre de la page</title>
    </head>
    <body>

    </body>
</html>

<!doctype html><html lang="fr">    <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.

Le code ci-dessous doit être placé dans l’en-tête <head> de la page HTML. Il est nécessaire de personnaliser la valeur de l’attribut href afin qu’elle corresponde à l’emplacement et au nom du fichier CSS à lier.

<link  rel="stylesheet" type="text/css" href="style.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>

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

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

.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%);
    }
}

$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;
}

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

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

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

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

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

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

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