[Résolu] Galerie d'image avec css grid

Question

jerrry

16 Jan 2020 à 21:36

bonjour je teste et j'adapte un tuto que j'ai trouvé ici
https://www.freecodecamp.org/news/how-to-create-an-image-gallery-with-css-grid-e0f0fd666a5c
ce que j'ai reussi à faire rend ceci

upload/1579206541-78493-monrendu.jpg

et ça devrait faire ceci upload/1579206611-78493-rendu.jpg

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        
        <link rel="stylesheet" href="css/style.css">
        <link rel="shortcut icon" type="image/png" href="img/favicon.png">

        <title>CSS Grids Gallery</title>
    </head>
    <body>
     
   <div class="gallery">

  <id class="gallery__item gallery__item--1">
    <img src="img/image-1.jpg" class="gallery__img" alt="Image 1">
  </id>
  <id class="gallery__item gallery__item--2">
    <img src="img/image-2.jpg" class="gallery__img" alt="Image 2">
  </id>
  <id class="gallery__item gallery__item--3">
    <img src="img/image-3.jpg" class="gallery__img" alt="Image 3">
  </id>
   <id class="gallery__item gallery__item--4">
    <img src="img/image-4.jpg" class="gallery__img" alt="Image 4">
  </id>
  <id class="gallery__item gallery__item--5">
    <img src="img/image-5.jpg" class="gallery__img" alt="Image 5">
  </id>
  <id class="gallery__item gallery__item--6">
    <img src="img/image-6.jpg" class="gallery__img" alt="Image 6">
  </id>
</div>


.gallery {
   display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 5vw);
    grid-gap: 15px;
}
.gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gallery__item--1 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
}

.gallery__item--2 {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 3;
}
.gallery__item--3 {
    grid-column-start: 5;
    grid-column-end: 9;
    grid-row-start: 1;
    grid-row-end: 6;
}
.gallery__item--4 {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 3;
    grid-row-end: 6;
}
.gallery__item--5 {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 6;
    grid-row-end: 9;
}
.gallery__item--6 {
    grid-column-start: 5;
    grid-column-end: 9;
    grid-row-start: 6;
    grid-row-end: 9;
}

merci de votre aide
le zip est là https://www.dropbox.com/s/h5s8mel8cnu3y2f/tuto.zip?dl=0

Bongota

17 Jan 2020 à 11:00

Bonjour,
étrange, en recopiant exactement ton code html et css, j'obtiens les résultat que tu recherches (sous firefox). Et le tout est parfaitement responsive.
Un conseil, il est inutile d'alourdir le code css :


 .gallery__item--1 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
}    
à la place, tu peux mettre simplement :
.gallery__item--1 {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

le / est suffisant, la répétition des grid-column-start et end est inutile (à moins qu'une personne me contredise ici). D'autre part, en mettant :
grid-template-rows: repeat (8, 5vw);, tu coupes en hauteur les images. En mettant auto à la place de 5vw, elles sont entières. C'est à toi d'ajuster, j'ai pris des images de 320 px.
Si tu veux mettre la galerie sur un site en fonction, il faudra rajouter des @media, afin d'empiler les images en version mobile.
Et ne pas oublier min-height: 100vh; dans .gallery. Et aussi des préfix pour IE Smiley cligne

Modifié par Bongota (17 Jan 2020 - 11:05)

jerrry

17 Jan 2020 à 15:13

est ce que tu peux essayer avec mes images stp
elles ont des tailles differentes chacune
merci

Raphael

Administrateur

17 Jan 2020 à 16:46

Hello,

Cela me semble bizarre et complètement inutile de devoir placer une par une chaque image dans la grille.
Je n'ai malheureusement pas le temps de tout décortiquer, mais je peux te proposer une solution qui me semble bien plus simple et surtout, complètement automatique : https://codepen.io/raphaelgoetter/pen/pgRQwv

(Le petit bout de JS sert uniquement à ajouter les classes "portrait" et "landscape" automatiquement selon le ratio des images. Tu peux tout à fait t'en passer et ajouter les classes à la main si tu le souhaites)

J'espère que tu vas t'en sortir Smiley cligne

aliasdmc

19 Jan 2020 à 12:10

Bonjour jerrry,
Exemple de ton code avec tes images :
J'ai juste changé la balise id en div :
https://codepen.io/Zonecss/pen/mdyjYJb

jerrry

19 Jan 2020 à 16:03

j'ai recopié le html et le css mais chez moi ça ne marche pas

<div class="gallery">

  <div class="gallery__item gallery__item--1">
    <img src="https://forum.alsacreations.com/upload/1579270308-78493-image-1.jpg" class="gallery__img" alt="Image 1">
  </div>
  <div class="gallery__item gallery__item--2">
    <img src="https://forum.alsacreations.com/upload/1579270323-78493-image-2.jpg" class="gallery__img" alt="Image 2">
  </div>
  <div class="gallery__item gallery__item--3">
    <img src="https://forum.alsacreations.com/upload/1579270337-78493-image-3.jpg" class="gallery__img" alt="Image 3">
  </div>
  <div class="gallery__item gallery__item--4">
    <img src="https://forum.alsacreations.com/upload/1579270350-78493-image-4.jpg" class="gallery__img" alt="Image 4">
  </div>
  <div class="gallery__item gallery__item--5">
    <img src="https://forum.alsacreations.com/upload/1579270363-78493-image-5.jpg" class="gallery__img" alt="Image 5">
  </div>
  <div class="gallery__item gallery__item--6">
    <img src="https://forum.alsacreations.com/upload/1579270373-78493-image-6.jpg" class="gallery__img" alt="Image 6">
  </div>
</div>

.gallery {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 5vw);
  gap: 15px 15px;
}
.gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__item--1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}

.gallery__item--2 {
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 3;
}
.gallery__item--3 {
  grid-column-start: 5;
  grid-column-end: 9;
  grid-row-start: 1;
  grid-row-end: 6;
}
.gallery__item--4 {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 3;
  grid-row-end: 6;
}
.gallery__item--5 {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 6;
  grid-row-end: 9;
}
.gallery__item--6 {
  grid-column-start: 5;
  grid-column-end: 9;
  grid-row-start: 6;
  grid-row-end: 9;
}

une idee? on dirait que le css ne s'applique pas
merci

_laurent

Modérateur

28 Jan 2020 à 23:03

jerrry a écrit :
j'ai recopié le html et le css mais chez moi ça ne marche pas

Je viens de le recopier ici https://jsfiddle.net/undless/1cq3trpz/1/ et à part "gap" au lieu de "grid-gap" ca marche très bien.

Tu utilises IE6 ? Smiley lol

_laurent

Modérateur

29 Jan 2020 à 00:29

Jean-Pierre-Bruneau a écrit :
j'avais eu tort dans ma version de mettre grid-gap ?

Heu non pas que je sache... c'est juste qu'il avait mis "gap" au lieu de "grid-gap" dans son code et "gap" tout court ca existe pas.

Jean-Pierre-Bruneau a écrit :
Je ne vois pas quelle influence dans mon cas ? je ne sais même pas la différence.Si tu as une minute je suis preneur.

L’intérêt du gap ? C'est l'espacement entre les blocs de ta grille.

Yordi

Modérateur

29 Jan 2020 à 10:10

Il me semble que ca a été implémenté dans les navigateurs avec la propriété grid-gap (lors de l'implémentation de grid), mais cette propriété est non-standard. Pour simplifier/unifier (et dans le but - si je me souviens bien - de pouvoir l'utiliser avec flex ou column), il me semble qu'on devrait repasser à gap.

Raphael

Administrateur

29 Jan 2020 à 14:42

Yordi a écrit :
Il me semble que ca a été implémenté dans les navigateurs avec la propriété grid-gap (lors de l'implémentation de grid), mais cette propriété est non-standard. Pour simplifier/unifier (et dans le but - si je me souviens bien - de pouvoir l'utiliser avec flex ou column), il me semble qu'on devrait repasser à gap.

Hello,

Oui c'est globalement ça.

L'historique est celui-ci :
1- grid-gap est apparu au sein de la première spec de Grid-Layout, pour réaliser des gouttières entre les colonnes (traduction : les navigateurs de cette époque ont implémenté grid-gap)
2- les rédacteurs de la spec Flexbox on trouvé cette propriété très intéressante (tu m'étonnes) et ont souhaité pouvoir l'utiliser à terme dans Flexbox aussi
3- grid-gap est alors devenu officiellement gap et, surtout, a été supprimé de la spec Grid Layout pour apparaître dans une spec transversale au doux nom de "CSS Box Alignment Module Level 3"... elle n'est donc plus dédiée à Grid Layout dorénavant. (traduction : les navigateurs modernes reconnaissent gap)

Au final :
- la plupart des navigateurs modernes aujourd'hui reconnaissent gap
- les anciens navigateurs ne reconnaissent que grid-gap
- grid-gap est abandonné, donc un jour les navigateurs ne le reconnaitront plus. Il vaut donc mieux utiliser gap (ou au pire les deux à la fois pour être sûr)

_laurent

Modérateur

29 Jan 2020 à 15:05

Au temps pour moi, je n'avais pas suivi. Je ne connaissais pas "gap" tout cours ni le lien avec flexbox et jsfiddle me met une erreur dans l'ide... je vais leur ouvrir une issue sur github Smiley lol

Merci !

jerrry

29 Jan 2020 à 17:09

j'utilise firefox et chez moi ça ne marche pas j'ai bien recopié le html et le css
les fichiers sont là
https://www.dropbox.com/l/scl/AACAbs_OK_wLFNTN5i_0hPgl_k191LOzWHk

je comprends pas trop Smiley biggol

merci de votre aide

Sujet clos

CSS et mise en forme, CSS3

[Résolu] Galerie d'image avec css grid