Portfolio : CSS grid (exemples)

7/12/2020 ☼ grid ☼ grille ☼ portfolio

Niveau : ★★★☆☆

Cours Projet Web 2020-21. Voici les exemples à étudier et modifier. Les commentaires dans le code permettent de suivre les différentes étapes.

Le site de Jens Simmons est une excellente ressource pour continuer à travailler avec CCS Grid.

Exemple 1 : une galerie d’images qui s’adapte à la largeur de la fenêtre

⟶ Voir l’exemple en pleine page

See the Pen Portfolio : css grid #2 by Nicolas Tilly (@nicolastilly) on CodePen.

(images du site : https://picsum.photos/)

Le code html

On place dans la div container les liens vers les 12 images.

<div class="container">
    
    <img src="https://picsum.photos/640/480?random=1">
    <img src="https://picsum.photos/640/480?random=2">
    <img src="https://picsum.photos/640/480?random=3">
    <img src="https://picsum.photos/640/480?random=4">
    <img src="https://picsum.photos/640/480?random=5">
    <img src="https://picsum.photos/640/480?random=6">
    <img src="https://picsum.photos/640/480?random=7">
    <img src="https://picsum.photos/640/480?random=8">
    <img src="https://picsum.photos/640/480?random=9">
    <img src="https://picsum.photos/640/480?random=10">
    <img src="https://picsum.photos/640/480?random=11">
    <img src="https://picsum.photos/640/480?random=12">
    
</div>

Le code CSS

Par rapport au 1er cours, la nouvelle façon de travailler avec grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); permet une répartition des images automatique dans la page. En allant d’une largeur minimum de 400px à une fraction afin de prendre toute la largeur disponible sur un petit écran.

Les images dans le container sont également affichées à 100% de la largeur du bloc.

* {
    margin:0;
    padding:0;
}

body {
    background-color:black;
}

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));/*on ajoute des colonnes de façon 
à remplir tout l'espace disponible. Les images font 400px de large minimum et 1 fraction au maximum.*/
    grid-gap:20px;/*goutière de 20px entre les images. À enlenver si on veut que les images 
se touchent.*/
}

.container img {
    width:100%;/*les images du container sont à 100% de largeur*/
}

Exemple 2 : Une grille de motifs

⟶ Voir l’exemple en pleine page

See the Pen Portfolio : css grid #3 by Nicolas Tilly (@nicolastilly) on CodePen.

Motifs tirés de ce site

Le code html

Comme pour le 1er cours, on place les différents blocs dans la div container. Il y a deux titres h1 qui sont centrés verticalement et horizontalement dans les deux blocs.

<div class="container">
    
    <div class="bloc1"></div>
    <div class="bloc2"></div>
    <div class="bloc3"></div>
    <div class="bloc4"></div>
    <div class="bloc5"></div>
    <div class="align bloc6"><h1>CSS GRID</h1></div>
    <div class="bloc7"></div>
    <div class="bloc8"></div>
    <div class="bloc9"></div>
    <div class="bloc10"></div>
    <div class="bloc11"></div>
    <div class="bloc12"></div>
    <div class="bloc13"></div>
    <div class="align bloc14"><h1>& PATTERNS</h1></div>
    <div class="bloc15"></div>
    <div class="bloc16"></div>

</div>

Le code CSS

Il est long, mais c’est surtout à cause des patterns issus du site dans les blocs :) Cet exercice est surtout une approche graphique différente (des motifs en css dans le blocs), il n’y a pas de nouveauté par rapport au 1er cours.

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #dfdfe9;
    /*margin:3rem;*/
}

/*le titre*/
h1 {
    font-family: "JetBrains Mono", monospace;
    font-size: 3em;
    text-align:center;
}

/*le centrage du titre dans le bloc*/
.align {
  display: flex;
  align-items: center;
  justify-content: center;
}

/*la grille*/
.container {
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas:
        "bloc1 bloc4 bloc3 bloc2"
        "bloc5 bloc6 bloc3 bloc8"
        "bloc9 bloc9 bloc7 bloc12"
        "bloc13 bloc14 bloc14 bloc16";
}

/*Tous les blocs et les patterns*/
.bloc1 {
    grid-area: bloc1;
    background-color: #dfdfe9;
    background: repeating-linear-gradient(
        45deg,
        #161617,
        #161617 6px,
        #dfdfe9 6px,
        #dfdfe9 30px
    );
}
.bloc2 {
    grid-area: bloc2;
    background-color: #dfdfe9;
    background: repeating-linear-gradient(
        -45deg,
        #161617,
        #161617 6px,
        #dfdfe9 6px,
        #dfdfe9 30px
    );
}
.bloc3 {
    grid-area: bloc3;
    background-color: #dfdfe9;
    background-image: linear-gradient(
            #161617 2.4000000000000004px,
            transparent 2.4000000000000004px
        ),
        linear-gradient(
            90deg,
            #161617 2.4000000000000004px,
            transparent 2.4000000000000004px
        ),
        linear-gradient(
            #161617 1.2000000000000002px,
            transparent 1.2000000000000002px
        ),
        linear-gradient(
            90deg,
            #161617 1.2000000000000002px,
            #dfdfe9 1.2000000000000002px
        );
    background-size: 60px 60px, 60px 60px, 12px 12px, 12px 12px;
    background-position: -2.4000000000000004px -2.4000000000000004px,
        -2.4000000000000004px -2.4000000000000004px,
        -1.2000000000000002px -1.2000000000000002px,
        -1.2000000000000002px -1.2000000000000002px;
}
.bloc4 {
    grid-area: bloc4;
    background-color: #dfdfe9;
    background-image: radial-gradient(
        #161617 0.6000000000000001px,
        #dfdfe9 0.6000000000000001px
    );
    background-size: 12px 12px;
}
.bloc5 {
    grid-area: bloc5;
    background-color: #dfdfe9;
    background-size: 12px 12px;
    background-image: repeating-linear-gradient(
        45deg,
        #161617 0,
        #161617 1.2000000000000002px,
        #dfdfe9 0,
        #dfdfe9 50%
    );
}
.bloc6 {
    grid-area: bloc6;
    justify-content: center;
    align-content: center;
    background-color: #dfdfe9;
    background-image: linear-gradient(
            #161617 1.2000000000000002px,
            transparent 1.2000000000000002px
        ),
        linear-gradient(
            to right,
            #161617 1.2000000000000002px,
            #dfdfe9 1.2000000000000002px
        );
    background-size: 24px 24px;
}
.bloc7 {
    grid-area: bloc7;
    background-color: #dfdfe9;
    background-size: 24px 24px;
    background-image: repeating-linear-gradient(
        0deg,
        #161617,
        #161617 1.2000000000000002px,
        #dfdfe9 1.2000000000000002px,
        #dfdfe9
    );
}
.bloc8 {
    grid-area: bloc8;
    background-color: #dfdfe9;
    background-size: 24px 24px;
    background-image: repeating-linear-gradient(
        to right,
        #161617,
        #161617 1.2000000000000002px,
        #dfdfe9 1.2000000000000002px,
        #dfdfe9
    );
}
.bloc9 {
    grid-area: bloc9;
    background-color: #dfdfe9;
    background: radial-gradient(
            circle,
            transparent 20%,
            #dfdfe9 20%,
            #dfdfe9 80%,
            transparent 80%,
            transparent
        ),
        radial-gradient(
                circle,
                transparent 20%,
                #dfdfe9 20%,
                #dfdfe9 80%,
                transparent 80%,
                transparent
            )
            30px 30px,
        linear-gradient(
                #161617 2.4000000000000004px,
                transparent 2.4000000000000004px
            )
            0 -1.2000000000000002px,
        linear-gradient(
                90deg,
                #161617 2.4000000000000004px,
                #dfdfe9 2.4000000000000004px
            ) -1.2000000000000002px 0;
    background-size: 60px 60px, 60px 60px, 30px 30px, 30px 30px;
}
.bloc10 {
    grid-area: bloc10;
    background-color: #dfdfe9;
    background-image: linear-gradient(135deg, #161617 25%, transparent 25%),
        linear-gradient(225deg, #161617 25%, transparent 25%),
        linear-gradient(45deg, #161617 25%, transparent 25%),
        linear-gradient(315deg, #161617 25%, #dfdfe9 25%);
    background-position: 12px 0, 12px 0, 0 0, 0 0;
    background-size: 24px 24px;
    background-repeat: repeat;
}
.bloc11 {
    grid-area: bloc11;
    background-color: #dfdfe9;
    background-image: linear-gradient(135deg, #161617 25%, transparent 25%),
        linear-gradient(225deg, #161617 25%, transparent 25%),
        linear-gradient(45deg, #161617 25%, transparent 25%),
        linear-gradient(315deg, #161617 25%, #dfdfe9 25%);
    background-position: 12px 0, 12px 0, 0 0, 0 0;
    background-size: 12px 12px;
    background-repeat: repeat;
}
.bloc12 {
    grid-area: bloc12;
    background-color: #dfdfe9;
    background-image: linear-gradient(45deg, #161617 50%, #dfdfe9 50%);
    background-size: 12px 12px;
}
.bloc13 {
    grid-area: bloc13;
    background-color: #dfdfe9;
    background-image: repeating-linear-gradient(
            45deg,
            #161617 25%,
            transparent 25%,
            transparent 75%,
            #161617 75%,
            #161617
        ),
        repeating-linear-gradient(
            45deg,
            #161617 25%,
            #dfdfe9 25%,
            #dfdfe9 75%,
            #161617 75%,
            #161617
        );
    background-position: 0 0, 12px 12px;
    background-size: 24px 24px;
}
.bloc14 {
    grid-area: bloc14;
    background-color: #dfdfe9;
    background-image: radial-gradient(
            #161617 0.6000000000000001px,
            transparent 0.6000000000000001px
        ),
        radial-gradient(#161617 0.6000000000000001px, #dfdfe9 0.6000000000000001px);
    background-size: 24px 24px;
    background-position: 0 0, 12px 12px;
}
.bloc15 {
    grid-area: bloc15;
    background-color: #dfdfe9;
    background-image: repeating-radial-gradient(
            circle at 0 0,
            transparent 0,
            #dfdfe9 12px
        ),
        repeating-linear-gradient(#16161755, #161617);
}
.bloc16 {
    grid-area: bloc16;
    background-color: #dfdfe9;
    background-image: linear-gradient(
            30deg,
            #161617 12%,
            transparent 12.5%,
            transparent 87%,
            #161617 87.5%,
            #161617
        ),
        linear-gradient(
            150deg,
            #161617 12%,
            transparent 12.5%,
            transparent 87%,
            #161617 87.5%,
            #161617
        ),
        linear-gradient(
            30deg,
            #161617 12%,
            transparent 12.5%,
            transparent 87%,
            #161617 87.5%,
            #161617
        ),
        linear-gradient(
            150deg,
            #161617 12%,
            transparent 12.5%,
            transparent 87%,
            #161617 87.5%,
            #161617
        ),
        linear-gradient(
            60deg,
            #16161777 25%,
            transparent 25.5%,
            transparent 75%,
            #16161777 75%,
            #16161777
        ),
        linear-gradient(
            60deg,
            #16161777 25%,
            transparent 25.5%,
            transparent 75%,
            #16161777 75%,
            #16161777
        );
    background-size: 24px 42px;
    background-position: 0 0, 0 0, 12px 21px, 12px 21px, 0 0, 12px 21px;
}

Exemple 3 : une grille tournée dans la page et centrée. Elle change également de disposition sur un petit écran

⟶ Voir l’exemple en pleine page

See the Pen Portfolio : css grid #4 by Nicolas Tilly (@nicolastilly) on CodePen.

Cet exercice a pour but de manipuler la grille dans la page (transform: rotate(-45deg);) et de la placer au centre (display: flex;).

L’exercice montre aussi comment adapter la grille sur un petit écran (@media).

Le code html

On place les blocs dans la div container. Celle-ci est également dans une section afin de centrer la grille dans la page.

<section>
<div class="container">
    <div class="align bloc1">○</div>
    <div class="align bloc2">○</div>
    <div class="align bloc3">○</div>
    <div class="align bloc4">○</div>
    <div class="align bloc5">○</div>
    <div class="align bloc6">○</div>
</div>
</section>

Le code CSS

* {
    margin: 0;
    padding: 0;
}

body {
    background-color:#212121;
    color:#212121;
    font-size:2em;
}

/*Pour centrer le contenu à l'intérieur des blocs*/
.align {
    display: flex;
  justify-content: center;
  align-items: center;
}

/*La section sert à centrer le container (grille) dans la page avec flexbox*/
section {
    height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*la grille*/
.container {
    transform: rotate(-45deg);/*tourner le container*/
    border:5px solid #616161;/*une bordure autour du container*/
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows: 200px 200px;
    /*goutières des colonnes et lignes*/
    column-gap:5px;
    row-gap:5px;
}

/*les blocs et les couleurs des fonds*/
.bloc1 {
    background-color:#F6BD60;
}
.bloc2 {
    background-color:#F7EDE2;
}
.bloc3 {
    background-color:#F5CAC3;
}
.bloc4 {
    background-color:#EDE7F6;
}
.bloc5 {
    background-color:#84A59D;
}
.bloc6 {
    background-color:#F28482;
}

/*
Pour adapter la grille pour le smartphone : 
-on enlève la rotation
-on change la taille des blocs
-on enlève les goutières
*/
@media only screen and (max-width: 767px) { 
        .container {
                transform:rotate(0deg);
                grid-template-columns: 100px 100px 100px;
                grid-template-rows: 100px 100px;
                column-gap:0px;
                row-gap:0px;
        }
}