How do I change the page layout from 2 columns to 3 columns in refresh theme?

Store Design
,

Topic summary

Issue Resolved: Changing Blog Layout Columns

A user needed to modify the Refresh theme’s blog collection page from 2 columns to 3-4 columns but couldn’t locate the setting in the theme editor.

Solution Found:

  • Add custom CSS code under blog settings
  • The provided CSS snippet uses CSS Grid properties to control column layout
  • Specifically targets .blog-articles and .article-card__image classes
  • Uses grid-template-columns: repeat(3, minmax(0, 1fr)) to create a 3-column responsive grid

Status:
The user marked this as solved but indicated they’re seeking additional tips or refinements for the implementation.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

I’m using the Refresh theme and I want to change the blog collection page from 2 columns to 3-4 columns. I couldn’t find the relevant setting in the theme settings, so I’m wondering how to achieve this.

Thanks in advance for any help from the technical experts.

My Store: https://www.ikoolcore.com/blogs/knowledge-base

2

solved. but need more tips:
Just add custom css under blog settings:

.article-card__image {
aspect-ratio: 16/9;
}
.blog-articles {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}