Making Multiple Collapsible Content Containers into a 2x2 Grid

Topic summary

Goal: arrange four collapsible content containers into a 2x2 grid on a Shopify FAQ page using the Dawn theme.

Current state: all containers are centered in a single column; desired layout is two columns (left: “Shipping & Returns,” right: “Organic,” followed by the remaining two beneath them).

Context: the request focuses on CSS/HTML customization within the Dawn theme to achieve a responsive two-column grid for collapsible sections.

Evidence: a screenshot was shared to illustrate the current layout. The store URL and password (“buthid”) were provided, and the target page is the FAQ.

Latest update: access details were supplied after a request for the URL, enabling reviewers to inspect the live setup.

Outcome/status: no solution or code provided yet; the thread remains open, awaiting guidance on implementing a 2x2 grid (likely via CSS grid/flexbox and section styling). Unanswered: exact theme section structure and whether custom code or theme settings support multi-column collapsible blocks.

Summarized with AI on January 15. AI used: gpt-5.

Hello - Here I have four separate collapsible content containers stuck in the center here. I would like to put them in a 2x2 grid, so that “Shipping & Returns” with its collapsible rows are in one column on the left, and across from it would be the next container “Organic” with its collapsible rows in the second column on the right, and so on. Currently using the Dawn theme, would really love some help with this problem!

1 Like

Hi @beaklein

Im not sure if we can do that, Would you mind to share your store URL website? Thanks!

https://85501b-2.myshopify.com/ - password protected by “buthid”

Please let me know if that works. The page I’m trying to fix is the FAQ page.