Positionnement d'éléments en grid

Salut à tous,
J'ai une interrogation sur la manière dont vous feriez ça :


Mon markup est le suivant (simplifié) :

<div class="Tiles">
    <div class="Item">
        <img src="image.jpg" alt="">
    </div>
    <div class="Item">
        <img src="image.jpg" alt="">
    </div>
    <div class="Item">
        <img src="image.jpg" alt="">
    </div>
    <div class="Item">
        <img src="image.jpg" alt="">
    </div>
</div>

Et j'ai pour le moment cette idée :

.Tiles {
    display: grid;
    overflow: hidden;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 200px 200px;
    grid-auto-flow: column;
}
.Tiles .Item {
    overflow: hidden;
}
.Tiles .Item:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / 3;
}
.Tiles .Item:nth-child(4) {
    grid-column: 3;
    grid-row: 1 / 3;
}

Ca fonctionne mais ça n'est pas responsive du tout en hauteur. En réduisant la taille de l'écran, les images vont se réduire mais pas les blocs ".Item".

Le truc est que j'aimerais dans la mesure du possible ne pas spécifier de hauteur de ligne fixe ici : "grid-template-rows: 200px 200px;".
Vous auriez une idée pour faire que les 2 blocs du milieu fassent toujours la moitié de la hauteur des blocs 1 et 4 ?

Merci d'avance
Matthieu
Modifié par MatthieuR (06 Jul 2021 - 10:09)

Salut !

grid-template-rows: 50% 50%;

?

Au passage :

grid-row: 1 / 3;

tu n'as pas que 2 lignes ? c'est pas plutôt 1/2 ? Sinon pour pas me planter j'utilise plutôt

grid-row: span 2;

Et plus largement je prèfère passer pas les grid-area plutôt que les grid-row et grid-col avec des numéros car pour le responsive c'est clairement plus rapide de jute gérer le template que de devoir tout réassigner.

Bonne journée !

Merci Laurent pour ta réponse rapide !
J'avais tenté

grid-template-rows: 50% 50%;

Mais sans succès car il faut assigner une hauteur à ".Tiles".
Je tente autre chose et ça à l'air de fonctionner. Je reviendrai poster ça si la solution est OK.

Par ailleurs, je note l'utilisation du "grid-area", en effet ça doit être plus pratique.

MatthieuR a écrit :
Mais sans succès car il faut assigner une hauteur à ".Tiles".

Mmmmmh il ne me semble pas mais j'ai peut être loupé une donnée dans ton problème : https://jsfiddle.net/1h527pLn/1/

Bonjour,

j'aurais une approche différente de Laurent sans faire usage de grid-area (trop rigide et verbeux à mon gout et peut-être trop rigide coté responsive ), pour grid, il est aussi préférable d'utiliser les fractions(fr) plutôt que des valeurs fixes et laisser le navigateur se charger du reste.

Pour ce layout et sa hauteur, en retirant les images pour le calcul des hauteurs, elle peut-être déterminer par la hauteur de la ligne(row) la plus haute dans la grille en fonction des textes.

On peut partir sur un

grid-template-columns:repeat(3,1fr);
grid-template-rows:repeat(2,1fr);
grid-auto-flow:colum; /*permet ici de ne pas attribuer un grid-column aux enfants mais sera construit sur 2 lignes uniquement*/

Pour sortir les images du calcul de la hauteur on peut faire:

height:0;
min-height:100%;
/* assortis de */
width:100%;
object-fit-cover ;

Rendu similaire a un background-size:cover ; tout en gardant les images illustratives dans le flux.

Coté responsive, il faudra en passer par une mediaquerie pour désactiver au minimum le grid-auto-flow:column pour passer outre les 2 lignes(row) initialisées et réinitialisé aussi le nombre de colonne , un simple display:block sur .Tiles marche aussi mais en perdant toutes les propriétés de grille.

démo de l'idée avec un mediaquerie à 800px : https://codepen.io/gc-nomade/pen/VwbeObQ Dans la démo , le texte en rouge est celui qui détermine la hauteur des lignes de la grille (en 3x2) , Si les textes dans la première colonne occupent plus de deux fois la longueur de celle en rouge, alors le calcul se fait à partir de celle-ci et la hauteur des lignes(rows) changent en restant équivalentes l'une à l'autre.

@Laurent , pour le grid-row : 1 / 3 ; cela passe bien au travers de 2 lignes. Cela démarre depuis le début de la première ligne et s’arrête contre ou sur le début de la frontiere de la troisième.

Cdt,
GC
Modifié par gcyrillus (06 Jul 2021 - 16:12)

Merci à vous deux, les 2 approches, très proches, sont en effet très fonctionnelles.
En fait je me bloquais un peu sur la conservation du ratio des tuiles et suis en train de voir avec la webdesigner sa volonté.
Je vais remettre à plat mon approche en considérant vos conseils.

gcyrillus a écrit :
grid-area (trop rigide et verbeux à mon gout et peut-être trop rigide coté responsive ), pour grid, il est aussi préférable d'utiliser les fractions(fr) plutôt que des valeurs fixes et laisser le navigateur se charger du reste.

Verbeux je veux bien le concéder (je trouve ca quand même plus agréable de gérer "header menu content etc" dans le CSS) mais rigide je suis pas d'accord surtout pour le responsive !! Passer d'une grid a une autre avec des span de ligne et/ou colonne qui change c'est plus long a gérer quand rien n'est défini autre que par un numéro de colonne et ligne surtout si on veux pouvoir changer l'ordre des affichages. Et puis même au niveau de la lecture du code, faut se taper le code de tout les enfants et conceptualiser les span pour arriver a voir ce que ca donne... je trouve ca plus pratique de gérer le template global en une seule ligne et de n'avori que ca a changer dans les media-queries... Mais bon question de gout j'imagine et puis surtout c'est pas le sujet du post

gcyrillus a écrit :
en retirant les images pour le calcul des hauteurs

C'est justement là qu'était le nerf de la guerre. Souvent les images viennent mettre le dawa dans les layout sans hauteur... gg et merci pour la solution je testerai ça dans mes projets !

gcyrillus a écrit :
@Laurent , pour le grid-row : 1 / 3 ; cela passe bien au travers de 2 lignes. Cela démarre depuis le début de la première ligne et s’arrête contre ou sur le début de la frontiere de la troisième.

Yes, j'ai vu ca après j'ai pas l'habitude de noter comme ça, j'arrêtais pas de me tromper justement