Probleme avec le display grid

Bonjour,

Voila je rencontre un petit problème avec mon code.

<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;
}

Je souhaite enfait faire une site vitrine comme design :
------------IMG------------------BLOCK TEXTE------
------------BLOCK TEXTE--------IMG----------------
------------IMG------------------BLOCK TEXTE------
------------BLOCK TEXTE--------IMG----------------

Pour la premiere partie ça marche (dieu merci) et en voulant faire la meme chose et juste inverser la position entre bloque de texte et l'img, ça ne marche et j'arrive pas a savoir pourquoi, impossible de les mettre cote a cote !