Miniatures avec Fondation Zurb et RoR

Question

J'ai donc récemment commencé à utiliser Zurb Foundation, et suivant this documentation.

J'ai le code ci-dessous qui rattache tous les designs dans la base de données.

<div> 
    <div class="small-4 small-offset-4 rows"><h2>Most Downloaded</h2></div> 
    <% @designs.each do |design| %> 
    <div><%= link_to design.title, design_path(design) %></div> 
    <% end %> 
</div> 

Je voulais de l'aide pour créer des vignettes pour chaque lien. Juste pour en avoir l'essentiel, je voulais utiliser la même image pour toutes les vignettes. J'ai utilisé une classe a.th pour envelopper l'image mais je voulais apprendre à afficher plus d'une (généralement 3) vignettes sur chaque ligne.

Disons qu'il y a 9 dessins au total, je voulais 3 rangées de 3 miniatures chacune. Je n'ai pas été capable de trouver de nombreux didacticiels/explications pour cela, donc des conseils seraient utiles pour comprendre comment cela fonctionne.

Answer 1

Consultez la grille de blocs de Foundation: http://foundation.zurb.com/docs/components/block-grid.html.

Je pense que c'est ce que vous recherchez. Pour obtenir une grille de vignettes de 3 par 3, cela ressemblerait à quelque chose comme:

<div> 
     <div class="small-4 small-offset-4 rows"><h2>Most Downloaded</h2></div> 
     <div class="row"> 
      <ul class="small-block-grid-3"> 
      <% @designs.each do |design| %> 
       <li><%= link_to design.title, design_path(design), class: "th" %></li> 
      <% end %> 
      </ul> 
     </div> 
    </div>