How can I arrange four columns in a row on Symmetry theme?

Store Design

Topic summary

Issue: The homepage “Multi‑column” section wraps items to a second row when more than three columns are used; the goal is four columns on a single row.

Proposed approaches:

  • Theme settings: If the Multi‑column section supports it, set Number of columns to 4 and adjust spacing.
  • Code customization: Create a custom section via Online Store → Themes → Actions → Edit code, then add CSS to force four equal columns and prevent clearing. Suggested snippet:
    • .grid__item { width: 25%; clear: none; }
    • Consider adding responsive media queries for mobile.

Follow‑ups and clarifications:

  • The requester notes the Multi‑column has no option to change the number and asks for CSS.
  • A contributor asks for the store URL to review specifics.
  • Steps and the CSS snippet are provided to implement the four‑column layout.

Status: No confirmation of success yet; awaiting user implementation or further theme‑specific guidance. The CSS code snippet is central to the proposed solution.

Summarized with AI on January 3. AI used: gpt-5.
1

Hi,

I’m adding a multicolumn onto my home page and want to have four columns in a row, however if you opt for more than three, it moves the second two columns below the first two.

Can anyone help share how I can have four columns on one row/line of my page?

Thanks,

1 Like
2

Hi @harveybarrett ,
This is Theodore from PageFly - Shopify Page Builder App.

display four columns in a single row on your homepage:

  1. Built-in “Multi-column” section (if available): Check your theme’s settings for a “Multi-column” section. If found, adjust the “Number of columns” to 4 and customize spacing as needed.

  2. Code editing (advanced users): Access the theme editor and create a new section. Add the provided CSS code to ensure each column occupies 25% width, making them fit in one row. Remember to adjust the width for even distribution and consider adding media queries for mobile responsiveness.

Best regards,
Theodore | PageFly

3

Hi, do you have the CSS code for this? There’s a multicolumn but no option to change the number

4

Hi @harveybarrett

Would you mind to share your store URL? Thanks!

5
  • Theme editor: Go to “Online Store” → “Themes” → “Actions” → “Edit code.”
  • Sections folder: Locate the “Sections” folder and click “Add a new section.”
  • Custom section creation: Name the section appropriately (e.g., “Four Columns”) and click “Create section.”
  • CSS code: Add the following CSS code to the newly created section’s template file (refer to Shopify’s documentation for specific file locations):
.grid__item {
  width: 25%; /* Adjust width as needed for even distribution */
  clear: none;
}
​