Hauteur variable d'un grid-item

Bonjour,

Cette discussion fait suite à ce sujet.

Ce codepen présente le problème.

Les dernières déclarations difficiles à lire ne servent qu'à faire fonctionner le carrousel, sans impact à ma connaissance sur la mise en page.

Mon problème est que la colonne de gauche du carrousel doit être aussi haute que la colonne de droite.

La solution la moins inesthétique et d'ajouter du padding en haut et en bas de l'image principale. Ou équivalent avec object-fit.

Dans le principe il y a une DIV dont je définis la taille, les image de tailles différentes viennent remplir la DIV avec object-fit.

Voyez-vous un code pour ajuster la hauteur du carrousel ?
Modifié par boteha_2 (02 May 2026 - 12:34)

Bonjour,

tu as par exemple : align-items:start; (équivalent à si tu mets tout les elements de la grille en margin-bottom:auto;) qui empeche ton carroussel de s'étirer sur la hauteur.

Voici une idée de reprise du css pour aussi étirer le div de .picture:

https://codepen.io/gc-nomade/pen/VYmYgdY

h1 {
  font-size: 1.25em;
  font-weight: bold;
  line-height: 1.4em;
}

div.bloc_haut {
  display: grid;
  margin: 1rem 0;
  column-gap: 3rem;
}

figure.photos {
  grid-column: 1;
  grid-row: 1 / span 5;
  border: 1px solid green;
  padding: 0;
}

h1 {
  grid-column: 2;
  grid-row: 1;
}

h1 + p {
  grid-column: 2;
  grid-row: 2;
}

h1 + p + p {
  grid-column: 2;
  grid-row: 4;
}

ul.voir {
  grid-column: 2;
  grid-row: 3;
}

div > figure.photos {
  min-width: 10rem;
}

figure.photos > div:first-of-type,
figure.photos > img[tabindex]:focus + div,
figure.photos > img[tabindex]:hover + div {
  height: 9.5625rem;
}

figure.photos > img[tabindex] + div {
  outline: 1px solid red;
  margin-bottom: 1.5rem;
  cursor: zoom-in;
}

div.bloc_haut > div > img.picture {
  box-sizing: border-box;
  padding: 0.625rem;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

div.bloc_haut > figure.photos > img[tabindex] + div > img {
  box-sizing: border-box;
  padding: 0.625rem;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

figure.photos > img[tabindex] {
  padding: 5px;
  cursor: pointer;
  background-color: white;
  outline: 1px solid blue;
}

figure.photos {
  justify-content: start;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  grid-template-rows: 1fr auto;
  gap: 1px;
  margin: 0;
}
figure.photos > div:has(.picture),
.picture {
  min-height: 100%;
  min-width: 100%;
}

figure.photos > div:first-of-type,
figure.photos > img[tabindex]:focus + div,
figure.photos > img[tabindex]:hover + div {
  grid-column: 1/-1;
  grid-row: 1;
  display: block;
}

/* Pour faire fonctionner le carrousel, sans impact sur la mise en page */

figure.photos > div:not(:first-of-type) {
  display: none;
}
figure.photos > img[tabindex]:focus {
  outline-color: red;
  z-index: 1;
}
figure.photos > img[tabindex]:hover {
  outline-color: red;
  z-index: 1;
}

.photos:has(img:not(:first-child):focus) > div:first-of-type > img {
  visibility: hidden;
}
.photos:has(img:not(:first-child):hover) > div:first-of-type > img {
  visibility: hidden;
}
.photos:has(img[tabindex]:first-child:hover) > div > img.picture {
  visibility: visible;
}
.photos:has(img[tabindex]:hover) > img:focus:not(:hover) + div > img {
  visibility: hidden;
}

Bonjour gcyrillus,

Merci pour ton suivi.

Si je suis, tes seuls changements sont :

dans div.bloc_haut
Tu enlèves align-items: start;

Dans figure.photos, tu ajoutes :
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
grid-template-rows: 1fr auto;

Et

figure.photos > div:has(.picture),
.picture {
min-height: 100%;
min-width: 100%;
}

Rien d'autre ?

Le résultat n'est pas exactement celui attendu.

Idéalement, la hauteur du div de l'image principale s'étend de façon à ce que la hauteur totale du carrousel soit égale à la hauteur de la colonne à droite.
Mais l'image garde sa taille.

J'y arrive quand il y a juste une image, pas un carrousel.
Voir ce codepen.

La hauteur du div de l'image est celle de la colonne de droite.
Mais la taille de l'image reste contrainte et les sortes de padding en haut et en bas sont des zones actives pour le click.

div.bloc_haut > div:has(>img.picture) {max-width: 23rem}

J'aimerais le même effet avec un carrousel à la place de l'image...

Pas trop confus j'espère.
Modifié par boteha_2 (02 May 2026 - 18:19)