Indiquez l’intérêt que vous portez à cette question
0

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.

CSS