Portfolio : CSS grid (décaler un élément dans la grille)

6/4/2021 ☼ 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.

1 - Le résultat dans la page

⟶ Voir l’exemple en pleine page

See the Pen CSS Grid with one element position relative by Nicolas Tilly (@nicolastilly) on CodePen.

Pour cet exercice, l’idée est de jouer avec les positions des éléments dans cette grille de 3x3. Au départ tous les éléments sont placés en lignes et en colonnes, mais avec la position relative il est alors possible de décaler (du haut, de la droite, de la gauche, du bas…) un élément. Avec une lègère ombre (facultatif) on donne alors l’impression en plus que l’élément se détache au dessus de la grille. Les possibilités graphiques sont intéressantes : puzzle à reconstuire, déconstruire des mots/lettres, imaginer des grilles de formes géométriques et des décalages graphiques…

2 - Le code html

<section>
    <div class="container">
    <div class="bloc1">
        <img src="https://picsum.photos/200?random=1">
    </div>
    <div class="bloc2">
            <img src="https://picsum.photos/200?random=2">
    </div>
    <div class="bloc3">
           <img src="https://picsum.photos/200?random=3">
    </div>
    <div class="bloc4">
        <img src="https://picsum.photos/200?random=4">
    </div>
        <div class="bloc5">
            <img src="https://picsum.photos/200?random=5">
        </div>
        <div class="bloc6">
            <img src="https://picsum.photos/200?random=6">
        </div>
        <div class="bloc7">
            <img src="https://picsum.photos/200?random=7">
        </div>
        <div class="bloc8">
            <img src="https://picsum.photos/200?random=8">
        </div>
        <div class="bloc9">
            <img src="https://picsum.photos/200?random=9">
        </div>
    </div>
</section>

3 - Le code CSS

body {
    margin: 0;
    padding: 0;
}

/*la section centre la grille dans la page*/
section {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*la grille : 3 colonnes et 3 lignes avec des blocs carré de 200x200px*/
.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows: 200px 200px 200px;
}

/*les images dans le container s'affiche à 100%*/
.container img {
    width: 100%;
}

/*le bloc2 est déplacé vers la gauche et vers le bas. Il est positionné en relative.*/
.bloc2 {
    position: relative;
    right: 100px;
    top: 30px;
    box-shadow: 5px 5px 10px 0px #000000;
}
/*le bloc8 est déplacé vers la droite et vers le haut. Il est positionné en relative.*/
.bloc8 {
    position: relative;
    left: 100px;
    top: -30px;
    box-shadow: 5px 5px 10px 0px #000000;
}

/*sur un petit écran on change la taille des blocs de la grille.
 On rétablit également les 2 blocs à leur place initiale dans la grille.*/
@media only screen and (max-width: 767px) {
    .container {
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
    }

    .bloc2 {
        top: 0;
        right: 0;
        box-shadow: none;
    }
    .bloc8 {
        top: 0;
        left: 0;
        box-shadow: none;
    }
}