[résolu] Boucle articles et css (grid)

Bonjour,

Je sèche sur l’utilisation de « grid » pour mettre en colonnes :
http://www.26fk.fr/-GALI-I-
(la couleur bleue et les hachures sont là pour visualiser les éléments).
Nous utilisons html5up_forty, j’ai créé un article-4.html (pour isoler la rubrique 4 et les articles associés) avec le code suivant :

<style>
.container{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: minmax(100px, auto);
  grid-column-gap: 10px;
  grid-row-gap: 15px;  
  background-color: blue;
  border: 3px red dashed;
}
.articles {
}
</style>


[(#REM)
        
        Si on est en mode blog, on affiche les articles dans l'ordre inverse chrono,
        sinon, par num titre.

    ][(#CONFIG{html5up_forty/mode_accueil}|=={blog}|?{ 
        [(#SET{tri,date})][
        (#SET{sens_tri,1})]
        ,
        [(#SET{tri,num titre})][
        (#SET{sens_tri,0})]
    })][
    
    (#REM) Si pas de variable pagination passée depuis la rubrique 
           on pagine à 9 par défaut.
    
    
    (#SET{pagination,#ENV{pagination,40}})]

    <B_articles>
    #ANCRE_PAGINATION

    <BOUCLE_articles(ARTICLES){id_rubrique}
        {tri #GET{tri}}
        {inverse #GET{sens_tri}}
        {pagination #GET{pagination}}>

 <div class="container">
        <div class="articles">
                        
                <a href="#URL_ARTICLE">
                        [(#LOGO_ARTICLE_RUBRIQUE|image_reduire{100, 100})]
        </a>
                    <h2>#TITRE</h2>
                #INTRODUCTION{100}
                    <li><a href="#URL_ARTICLE">Lire la suite</a></li>
                                
        </div>
</div>        

    </BOUCLE_articles>

[<p class="pagination">(#PAGINATION)</p>]
</B_articles>
Je ne trouve pas de réponse à ma question : comment mettre cette page en 3 colonnes avec "grid" ? Merci par avance pour votre aide.

Première piste, sans avoir tester : il faudrait que le div.container soit dans la partie conditionnelle de la boucle il me semble.

Bonjour,
Merci infiniment pour cette piste qui, de première, devient la seule puisque ça fonctionne parfaitement ! Merci 1000 fois Brice, et bonne continuation.

Merci pour le retour ! Et de rien :slight_smile:

Bonne continuation également !