Blog design - quarters

Topic summary

A user working with Shopify’s Dawn theme seeks help creating a customizable quarter-based grid layout for their blog. They want flexible patterns like 1/4 + 1/4 + 1/4 + 1/4, 1/4 + 1/4 + 2/4, or 2/4 + 2/4, ideally with random or customizable arrangements.

Visual references provided:

  • Screenshot of Cereal’s blog as inspiration showing the desired grid layout
  • Screenshot of their current test blog at todecay.com/blogs/testing

Attempted solution:
A support team member provided CSS code to add to theme.liquid that adjusts collection-list width for blog templates. However, the original poster indicated this didn’t address their actual need.

Status: The issue remains unresolved, with the quarter-based grid layout still needed.

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

Hi ,

This might be a bit of a stretch, but I’m hoping someone here can point me in the right direction.

I’m working on updating my blog layout and want to set the grid based on quarters. Ideally, the layout would be customizable or random, following patterns such as:

  • 1/4 + 1/4 + 1/4 + 1/4

  • 1/4 + 1/4 + 2/4

  • 2/4 + 2/4

Any help or suggestions would be greatly appreciated!

Example + my site below. I’m using Dawn theme.

Thanks, Andy

See Cereal as example:

This is my tes-blog, found on https://todecay.com/blogs/testing

and here is an image of it

Hi @larsvilhelmsson

1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for “theme.liquid” file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for tag and add the following code above tag: https://prnt.sc/KWtKYyZkDtYJ

Here is the code for Step 3:

{% style %}
{% if template.name == "blog" %}
.collection-list {
    width: 100%;
}
{% endif %}
{% endstyle %}

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

Not too sure you understood what I meant :slightly_smiling_face: But thanks for trying :slightly_smiling_face: