[Résolu] Grid css et redimensionnement

Ah le blanc à droite c'est après décalage de 20% vers la gauche de l'image de droite, et cette dernière fait bien toute la largeur, ok.

Je voyais le titre sur l'image de gauche dans le Fiddle, mais après changement de la largeur c'est plus clair

Ce à quoi je pensais c'est https://jsfiddle.net/mp9cuon0/

Dans le code HTML, le titre h1 est sorti de son parent et vient avant la 2e image (parce qu'il doit rester avant le paragraphe de texte sinon ça veut rien dire…

La grille devient une grille de 10 colonnes et 1fr est "amélioré" en minmax(0, 1fr) (grosse astuce pour que ce soit VRAIMENT 1fr / 10 colonnes de même largeur qqsoit le contenu. Bizarre et super compliqué mais c'est comme ça)

L'image 1, le titre et l'image 2 sont explicitement placés en rangée 1, dans la colonne qui va bien et pour les images s'étalent sur 5 colonnes.
On ne veut pas de l'auto-placement (ça remplace avantageusement le positionnement absolu).
Un problème restant : comme le titre vient avant la 2e image dans le code HTML, il est recouvert par celle-ci. z-index: 1; le fait passer au-dessus (yep z-index fonctionne avec Grid Layout).

Comme les transformations de 90deg fichent le brin (la largeur devient la hauteur et réciproquement) et que je voulais ajouter un fond translucide au titre pour le rendre lisible, ces transformations sont remplacées par "writing-mode" de haut en bas, de droite à gauche (il n'existe pas de gauche à droite ou alors avec une valeur non standard que seul Firefox reconnaît doooonc on tourne de 180deg et c'est bon ). Ça ça n'inverse pas X et Y

*{
.container {
    display: grid;
   grid-template-columns: repeat(10, minmax(0, 1fr)) ;
   grid-template-rows: 100% ; 
    /*grid-gap: 10px;*/
}


#one {
  grid-column: 1 / span 5;
  grid-row: 1; 
}

#two{
  position: relative;
  grid-column: 6 / span 5;
  grid-row: 1;
}

.container h1 {
    grid-column: 6;
    grid-row: 1;
    z-index: 1;
    writing-mode: tb-rl;
    transform: rotate(180deg);
    padding-right: 1rem; /* à gauche après rotation */
    background-color: rgba(255, 255, 255, 0.7);
   
}