Probleme avec le display grid

Bonjour a tous !

Cela fait déja deux jours que je galère avec mon site vitrine, n'étant pas un pro en matiere de css je suis entrain d'apprendre en mon rythme, cependant en voulant faire un design comme celui ci :
-----------------------BLOCK-TEXTE ----- IMG-----------------------
-----------------------IMG ----------------BLOCK TEXTE-----------------------
Je galére, j'ai essayé les float, les justify-content, les grid-column mais je n'arrive pas a trouver de solution et c'est pour cela que je me tourne vers vous, pour surement avoir une piste ou meme une solution ! ( Je me retrouvais souvent avec le texte et l'img qui ne veulent pas se mettre cote à cote )

Merci et bonne journée !
Modifié par JokyJoky (11 Feb 2020 - 14:16)

Quelle est ta structure HTML et le CSS que tu as tenté d'appliquer ?

As tu consulter : https://www.alsacreations.com/article/lire/1388-CSS3-Grid-Layout.html ?

Il y a plusieurs possibilité ,mais sans détails , difficile de voir ou ça coince .

Cdt

Je t'avoue que je ne suis pas trés a l'aise encore avec le display grid, mais je suis arrivé a une solution pour la 1ere etape avec ça :
"
<section class="s1">
<img class="img1" src="/Users/mac/Desktop/test/img/test.jpg" alt=""><br>


<div class="para1">
<p>Lorem ipsum dolor sit doloremque aperiam mollitia. Magni architecto beatae obcaecati?</span>
</div>
</section>

.s1 {
display: grid;
grid-template-columns: 50%;
margin : 30px 125px;
}

.para1 {

display: inline-block;
padding : 30px;
grid-column: 3 / 5;
} "
Sauf que IMPOSSIBLE de reussir a mettre le texte sur la gauche et l'img sur la droite, et je ne comprend pas pourquoi !

EDIT : Je n'ai jamais fait de template sous forme de conevas (je viens de voir sur le tuto) ça sera peut-etre la solution au lieu d'essayer de les placer manuellement ?
Modifié par JokyJoky (11 Feb 2020 - 15:15)

il y a grid-column pour t'aider à placer un element dans une colonne précise : https://developer.mozilla.org/fr/docs/Web/CSS/grid-column.

edit :

est ce que grid-column: 3 / 5; te semble correct si auparavant tu as : grid-template-columns: 50%; , mais tu demandes aussi a un élément de se positionner au travers de deux colonnes à partir de la troisième ? sinon ( 5 x 50% != 100% ) , alors que tu souhaites a priori 2 colonnes?
Modifié par gcyrillus (11 Feb 2020 - 23:15)

J'avoue ne pas avoir bien compris comment utiliser cette fonctionnalité et ton commentaire semble trés logique, cependant j'ai trouvé la solution a mon probléme sur youtube avec quelqu'un qui explique comment avoir le "design" que je voulais a l'aide du grid-template-columns: repeat(2, 1fr);