Blog Page in 3 columns

[CFriedman6]

Hello!
I am trying to get our blog listing page to be displayed into 3 columns accross versus the two that are showing using the standard blog content module.

I have tried creating custom modules and the posts then do not seem to filter in properly or show them all. I am guessing that is because it is not the standard Hubspot code for blogs to dynamically feed in? 

I have also tried the 3 column module, but then the blogs are just listed 3 times in the columns. 

[CarolinaDeMares · Accepted solution]

@CFriedman6 You're absolutely right — HubSpot’s default blog listing module is built to be used with specific internal blog variables (content, contents, blog_author, etc.), and when creating custom modules from scratch, if those variables aren’t referenced correctly or if the loop isn't used properly, your posts won’t render dynamically.

nstead of creating a new custom module, the cleanest and most scalable way is to edit the existing blog listing template and modify the layout using CSS or grid logic. Here's how:

• Go to your blog listing template (Design Tools > Your Blog > Listing Template).

• Locate the loop where posts are rendered:
  {% for content in contents %}
  <div class="blog-card">
  <!-- Blog card HTML: title, image, excerpt, etc. -->
  </div>
  {% endfor %}
  
  
  

• Wrap the cards in a container like:
  <div class="blog-grid">
  {% for content in contents %}
  <div class="blog-card">
  <!-- Your content block -->
  </div>
  {% endfor %}
  </div>
  
  
  
  
  
• Add CSS to the template or linked stylesheet:

.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.blog-card {
/* optional styles */
}


Hope this helps!