[Résolu] CSS Grid

Bonjour,

Je ne comprends pas pourquoi mon media queries ne fonctionne pas, c'est à dire que les elements de la grille ne passent pas les uns sous les autres quand la taille de l'écran est <= 800px.
Merci pour votre aide.
Cdt

          *,
          *::after,
          *::before {
            margin: 0;
            padding: 0;
            box-sizing: inherit; 
          }
          
          html {
            box-sizing: border-box;
            font-size: 62.5%; 
          }
          
          body {
            font-family: "Nunito", sans-serif;
            color: #333;
            font-weight: 300;
            line-height: 1.6; 
          }
          
          .container {
            width: 60%;
            margin: 2rem auto; 
          }

          @media all and (max-width: 800px) {
            .gallery {
            display: grid;
            grid-gap: 20px;
            grid-template-columns: 1fr;
            grid-template-rows: repeat(6, auto);
            grid-template-areas:  "gallery__item--1"
                                  "gallery__item--2" 
                                  "gallery__item--3"
                                  "gallery__item--4"
                                  "gallery__item--5"
                                  "gallery__item--6"}
            }
          .gallery {
            display: grid;
            grid-gap: 20px;
            grid-template-columns: repeat(8, 1fr);
            grid-template-rows: repeat(8, 5vw);
            grid-template-areas:  "gallery__item--1"
                                  "gallery__item--2" 
                                  "gallery__item--3"
                                  "gallery__item--4"
                                  "gallery__item--5"
                                  "gallery__item--6"
          }
          
          .gallery__img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block; 
          }
          
          .gallery__item--1 {
            grid-column-start: 1;
            grid-column-end: 3;
            grid-row-start: 1;
            grid-row-end: 3;
          
            /** Alternative Syntax **/
            /* grid-column: 1 / span 2;  */
            /* grid-row: 1 / span 2; */
          }
          
          .gallery__item--2 {
            grid-column-start: 3;
            grid-column-end: 5;
            grid-row-start: 1;
            grid-row-end: 3;
          
            /** Alternative Syntax **/
            /* grid-column: 3 / span 2;  */
            /* grid-row: 1 / span 2; */
          }
          
          .gallery__item--3 {
            grid-column-start: 5;
            grid-column-end: 9;
            grid-row-start: 1;
            grid-row-end: 6;
          
            /** Alternative Syntax **/
            /* grid-column: 5 / span 4;
            grid-row: 1 / span 5; */
          }
          
          .gallery__item--4 {
            grid-column-start: 1;
            grid-column-end: 5;
            grid-row-start: 3;
            grid-row-end: 6;
          
            /** Alternative Syntax **/
            /* grid-column: 1 / span 4;  */
            /* grid-row: 3 / span 3; */
          }
          
          .gallery__item--5 {
            grid-column-start: 1;
            grid-column-end: 5;
            grid-row-start: 6;
            grid-row-end: 9;
          
            /** Alternative Syntax **/
            /* grid-column: 1 / span 4; */
            /* grid-row: 6 / span 3; */
          }
          
          .gallery__item--6 {
            grid-column-start: 5;
            grid-column-end: 9;
            grid-row-start: 6;
            grid-row-end: 9;
          
            /** Alternative Syntax **/
            /* grid-column: 5 / span 4; */
            /* grid-row: 6 / span 3; */
          }

       <div class="container">
            <div class="gallery">
                <figure class="gallery__item gallery__item--1">
                    <img src="imgs/1.jpg" alt="Gallery image 1" class="gallery__img">
                </figure>
                <figure class="gallery__item gallery__item--2">
                    <img src="imgs/2.jpg" alt="Gallery image 2" class="gallery__img">
                </figure>
                <figure class="gallery__item gallery__item--3">
                    <img src="imgs/3.jpg" alt="Gallery image 3" class="gallery__img">
                </figure>
                <figure class="gallery__item gallery__item--4">
                    <img src="imgs/4.jpg" alt="Gallery image 4" class="gallery__img">
                </figure>
                <figure class="gallery__item gallery__item--5">
                    <img src="imgs/5.jpg" alt="Gallery image 5" class="gallery__img">
                </figure>
                <figure class="gallery__item gallery__item--6">
                    <img src="imgs/6.jpg" alt="Gallery image 6" class="gallery__img">
                </figure>
            </div>
        </div>

Hello,

Il y a plein de choses que je ne comprends pas dans ce que tu as écris et je crois que tu te compliques énormément la vie.

Pour commencer : pourquoi déclares-tu des "grid-template-areas" pour ne pas t'en servir pour placer tes contenus ?
C'est fait pour ça et là elles ne te servent strictement à rien.

Le problème principal est que les positionnements de chacun de tes éléments sont hors de ta media queriy, donc ils sont toujours placés au même endroit quel que soit la taille de ton écran. Par exemple ton "gallery__item--3" s'étend toujours de grid-column-start: 5 à grid-column-end: 9; et idem pour tous les autres.

Il faudrait que tu modifies ces coordonnées dans la Media Query pour changer leur position.

Attention aussi à toujours placer les Media Queries après les styles normaux sinon tu ne vas pas les écraser.


EDIT :

- grid-gap n'existe plus depuis un moment, c'est gap tout court
- grid-template-columns: 1fr; ici est inutile car une colonne seule prend toute la largeur par défaut
- grid-template-rows: repeat(6, auto); est inutile, c'est la valeur par défaut
- tu n'as pas besoin de répéter display: grid; grid-gap: 20px; à chaque fois, la première fois suffit
- pourquoi définir des hauteurs de rangées en vw (largeur de fenêtre) ? Tu ne voulais pas plutôt des vh (hauteur de fenêtre) ?
- Je n'ai vraiment pas compris pourquoi tu avais besoin de 8 colonnes et 5 rangées pour placer 6 images (grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(5, 5vw);)
- Enfin, peut-être la question la plus importante : le nombre d'images à placer est fixe/connu ou bien il peut y avoir un nombre inconnu d'images dans cette galerie ? Dans le second cas, il faut totalement éviter de les placer explicitement comme tu l'as fait et plutôt utiliser le positionnement automatique (faire des fusions avec span par exemple plutôt que de donner des coordonnées fixes à chacune des images). Un exemple ici : https://codepen.io/raphaelgoetter/full/pgRQwv

Voilà une idée de modification / simplification :

.gallery {
  display: grid;
  gap: 20px;
  grid-template-areas: 
    "image-1"
    "image-2"
    "image-3"
    "image-4"
    "image-5"
    "image-6";
}

@media (width >= 800px) {
  .gallery {
    min-height: 100vh;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 5vh);
    grid-template-areas: 
    "image-1 image-2 image-3"
    "image-4 image-4 image-4"
    "image-5 .       image-6";
  }  
}

.gallery__item--1 {
  grid-area: image-1;
}

.gallery__item--2 {
  grid-area: image-2;
}

.gallery__item--3 {
  grid-area: image-3;
}

.gallery__item--4 {
  grid-area: image-4;
}

.gallery__item--5 {
  grid-area: image-5;
}

.gallery__item--6 {
  grid-area: image-6;
}

Mon test en ligne : https://codepen.io/raphaelgoetter/pen/LYaqrzP?editors=1100
Modifié par Raphael (16 Feb 2024 - 18:44)

Re,
Merci pour ta réponse qui m'a bien aidée à mieux comprendre CSS grid. J'ai donc modifié mon code (à partir du tien). J'obtiens le grid ci-dessous:



avec le code ci-dessous:

.gallery {
  display: grid;
  gap: 5px;
  grid-template-areas: 
    "image-1"
    "image-2"
    "image-3"
    "image-4"
    "image-5"
    "image-6";
    align-items: center;
    justify-content: center;
}

@media (width >= 800px) {
  .gallery {
    /*min-height: 100vh;*/
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: 
    "image-1 image-2 image-3 image-3"
    "image-4 image-4 image-3 image-3"
    "image-5 image-5 image-6 image-6"
    /*"image-5 .       image-6";*/
  }  
}

.gallery__item--1 {
  grid-area: image-1;
}

.gallery__item--2 {
  grid-area: image-2;
}

.gallery__item--3 {
  grid-area: image-3;
}

.gallery__item--4 {
  grid-area: image-4;
}

.gallery__item--5 {
  grid-area: image-5;
}

.gallery__item--6 {
  grid-area: image-6;
}

    <body>
      <div class="container">
        <div class="gallery">
            <div class="gallery__item gallery__item--1">
                <img src="imgs/1.jpg" alt="Gallery image 1" class="gallery__img">
            </div>
            <div class="gallery__item gallery__item--2">
                <img src="imgs/2.jpg" alt="Gallery image 2" class="gallery__img">
            </div>
            <div class="gallery__item gallery__item--3">
                <img src="imgs/3.jpg" alt="Gallery image 3" class="gallery__img">
            </div>
            <div class="gallery__item gallery__item--4">
                <img src="imgs/4.jpg" alt="Gallery image 4" class="gallery__img">
            </div>
            <div class="gallery__item gallery__item--5">
                <img src="imgs/5.jpg" alt="Gallery image 5" class="gallery__img">
            </div>
            <div class="gallery__item gallery__item--6">
                <img src="imgs/6.jpg" alt="Gallery image 6" class="gallery__img">
            </div>
        </div>
    </div>
  </body>

Pourquoi les images ne sont-elles pas uniquement séparées par la valeur de gap soit 5px ?

Merci par avance.
Cdt

Bonjour,

Donnes une bordure ou une ombre aux éléments, puis donne des dimensions aux eelements de façon à ce qu'il couvre toute la zone où ils sont placés dans la grille, idem pour les images.

exemple à regarder si tu n'y arrives pas : https://codepen.io/gc-nomade/pen/NWJoeON

cdt

Bonjour,

Merci à vous 2 grâce à qui j'ai compris le fonctionnement des CSS grids.
Bon WE. Cdt

Résolu