[Résolu] [GRID débutant] Taille définie (mais) et responsive

Bonjour à toutes et tous,

je suis débutant en HTML CSS et encore plus sur GRID .

J'essaie de reproduire cette galerie que mon épouse m'a donné pour son futur site. J'ai pour le moment réussi à placer les éléments avec GRID mais je n'arrive pas à rendre le tout à la fois responsive mais que les formes soient figées (cf photo).

J'espère être clair dans mon explication

Si vous aviez quelques pistes je suis preneur car je tourne en rond depuis pas mal d'heures maintenant alors que je sens que je touche au bout.

Merci d'avance pour votre aide.

Je vous joins mon code via codepen ci-après :

https://codepen.io/lekurs/pen/jZxpdJ


et directement ici :

<div class="gallery">
    <div class="left-1">
        <a href="#"></a>
    </div>
    <div class="left-2">
        <a href="#"></a>
    </div>
    <div class="left-3">
            <a href="#"></a>
    </div>
    <div class="middle-1">
        <a href="#"></a>
    </div>
    <div class="middle-2">
        <a href="#"></a>
    </div>
    <div class="middle-3">
        <a href="#"></a>
    </div>
    <div class="middle-4">
        <a href="#"></a>
    </div>
    <div class="right-1">
        <a href="#"></a>
    </div>
    <div class="right-2">
        <a href="#"></a>
    </div>
</div>

.gallery {
    margin: 0 auto;
    display: grid;
    height: 80vh;
    grid-template-columns: 25% 25% 25% 1fr;
    grid-template-rows: 33% 13% 20%  13% 1fr;
    width: 60%;
    border: 1px solid red;
    grid-gap: 5px;

}

.left-1 {
    display: grid;
    grid-column: 1;
    grid-row: 1 / span 2;
    background: url('images/mariage-home.jpg') no-repeat center;
    background-size: cover;
}

.left-2 {
    display: grid;
    grid-column: 1;
    grid-row: 3 / span 2;
    background: url('images/anlor-nico-test-portrait.jpg') no-repeat center;
    background-size: cover;
}

.left-3 {
    display: grid;
    grid-column: 1;
    grid-row: 5;
    background: url('images/mariage-home.jpg') no-repeat center;
    background-size: cover;
}

.middle-1 {
    display: grid;
    grid-column: 2 / span 2;
    grid-row: 1 / span 2 ;
    background: url('images/anlor-nico-header-photo.jpg') no-repeat center;
    background-size: cover;
}

.middle-2 {
    display: grid;
    grid-column: 2;
    grid-row: 3 / span 3;
    background: url('images/anlor-nico-test-portrait.jpg') no-repeat center;
    background-size: cover;
}

.middle-3 {
    display: grid;
    grid-column: 3;
    grid-row: 3;
    background: url('images/mariage-home.jpg') no-repeat center;
    background-size: cover;
}

.middle-4 {
    display: grid;
    grid-column: 3 / span 2;
    grid-row: 4 / span 2;
    background: url('images/mariage-home.jpg') no-repeat center;
    background-size: cover;
}

.right-1 {
    display: grid;
    grid-column: 4;
    grid-row: 1;
    background: url('images/mariage-home.jpg') no-repeat center;
    background-size: cover;
}

.right-2 {
    display: grid;
    grid-column: 4;
    grid-row: 2 / span 2;
    background: url('images/mariage-home.jpg') no-repeat center;
    background-size: cover;
}

a {
    display: block;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    border: 1px solid;
}

Hello,

J'avoue qu'il est difficile de se prononcer sans savoir exactement ce que tu veux obtenir au final.

Quoi qu'il en soit, tu n'as indiqué aucun Media Queries et du coup je ne vois pas vraiment comment la grille pourra être responsive.

Pourrais-tu donner plus de précisions ?

Désolé mais c'est toujours très flou.

Pour commencer je ne comprends pas pourquoi tu appliques un display: grid à tous tes éléments *enfants* de la grille ?

J'ai peut-être une piste pour ton souci de "les images gardent leurs proportions de manière homotétique". En fait, ce ne serait pas tout simplement ce genre de résultat que tu souhaites : https://codepen.io/raphaelgoetter/pen/pgRQwv ?

Effectivement je ne sais pas pourquoi j'ai mis ce display: grid aux enfants, sûrement parce que je ne maîtrise pas grid .

Ton exemple se rapproche très fortement de ce que je souhaiterai faire oui.

Je sais pas si tu as regardé le lien que j'ai mis au dessus, si tu rétrécies ta fenêtre (sans aller jusqu'au break point d'une tablette) les images gardent leurs proportions et surtout leurs formes (carrée, rectangulaire etc).

Ce qui me pose problème c'est de définir une forme précise (carré ou rectangle) et surtout que cette "box" contenant mon image ne bouge jamais de forme (au moins jusqu'au break point).

J'espère être plus clair sur mon soucis ?

Je suis vraiment débutant html / css et encore plus sur grid. Pour te dire j'ai réussi à faire ça en lisant le tuto de ce site que je suis tout le temps.

Merci d'essayer de m'aider en tout cas.