Displaying content in a grid with {{ range .Pages }}

support
1

Problem: Hi there. I’m trying to create a list page that displays all posts in rows with 2-3 responsive columns (using Bootstrap). When I manually create each post, it displays this way. However, when I use {{ range .Pages }}, it stacks.

Attempted solutions: I’ve tried altering the row and column classes to be different sizes. I’ve also tried copying and pasting the below snippet, which repeats all posts but arranges them in multiple columns.

Snippet:

{{ range .Pages }}
<div class="row" data-masonry='{"percentPosition": true }'>  
  <div class="col-md-4 py-3">
    <div class="card">
     <img class="img-fluid rounded" src="{{ .Param `featuredImage` }}" alt="featured image">
        <div class="card-body">
          <div class="card-title">
             {{ .Title }}
          </div>
       <p class="card-text"> {{ .Summary }} </p>
       <p class="card-text"><a href="{{.Permalink}}"> Keep reading <i class='fa fa-long-arrow-right'></i></a> </p>
          </div>
       </div>
    </div>
 </div>
{{ end }}

Repository: Here. This snippet is from the Blog list page, but the issue is also present on the Issues list page.

Thanks for your time.

2

I have not used Bootstrap before (I use Tailwind), but you need to make sure the {{ range .Pages }} and its closing {{ end }} tag are inside the parent class that houses the grid items. So, just a guess, move the two inside the first division and it closing end tag. If that doesn’t work, then move it just before and after the card class and its closing div tag.

3

It’s not really Hugo matter, is that solution you looking like I used here with just CSS flex box and CSS @media query?

4

Marked the solution, but here’s what specifically worked for me:

<div class="row" data-masonry='{"percentPosition": true }'>  
   {{ range .Pages }}
    <div class="col-md-4 py-3">
      <div class="card">
       <img class="img-fluid rounded" src="{{ .Param `featuredImage` }}" alt="featured image">
          <div class="card-body">
            <div class="card-title">
               {{ .Title }}
            </div>
         <p class="card-text"> {{ .Summary }} </p>
         <p class="card-text"><a href="{{.Permalink}}"> Keep reading <i class='fa fa-long-arrow-right'></i></a> </p>
            </div>
         </div>
      </div>
   {{ end }}
   </div>

Pretty simple fix, but I was really struggling with it lol. Thanks!