Creating a multi-column text block on Squarespace, without using separate blocks

Creating well-structured, easy-to-read content is crucial for engaging your audience. Often, you might want to display content in two or more columns for better readability or layout design—but without manually adding separate blocks for each column.

In this tutorial, we’ll show you how to create a multi-column text block using a single block and a touch of custom CSS—ideal for blog posts, FAQs, descriptions, or service lists on Squarespace 7.1 and 7.0.

Table of Contents

• Why Use Multi-Column Text

• Step-by-Step Instructions

• Key Takeaways

• FAQs

• Conclusion

Why Use Multi-Column Text?

• Improves Layout: Content appears more organized and balanced.

• Enhances Readability: Breaks long paragraphs into digestible sections.

• Saves Time: One block, multiple columns—no need to manage separate elements.

Complexity: Easy

---

Step-by-Step Instructions

A useful tool you can use to identify the #collection-id, #block-id and section[data-section-id="xxxxx"] is a Chrome Extension called Squarespace ID Finder.

Step 1: Add text to the text block

Identity the text block id, you can also use the Chrome Extension for this as well.

Step 2: Add the CSS code to your website. From the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and paste the code

Then set the CSS properties

• "column-count" property to set the amount of columns, in this case we have 2;

• "column-gap" property to set the amount of spacing between the columns, in this case we have 40px;

#[Block-ID] p {
    column-count: 2;
    column-gap: 40px;
  }

If you need a single column on a phone screen, simply use the code instead. The columns adjust to a single column on mobile phones but multi-column for larger screens.

/*Mutiple column for larger screens*/
@media screen and (min-width: 640px) {
  #[Block-ID] p {
    column-count: 2;
    column-gap: 40px;
  }
}

---

Key Takeaways

• You don’t need multiple blocks to create a multi-column layout.

• Use the column-count CSS property to split content into 2 or more columns.

• Add a responsive media query to switch back to one column on mobile.

• You can target multiple sections with a reusable class or individually with block IDs.

FAQs

Can I make more than two columns?
Yes! Change column-count: 2; to 3, 4, etc., depending on how many columns you want.

Will it affect mobile layout?
No, the @media query ensures that the text returns to a single column for smaller screens.

Can I style the spacing between columns?
Yes! Use column-gap to increase or decrease spacing (e.g., column-gap: 60px;).

What content works best in columns?
Service lists, testimonials, short paragraphs, or side-by-side comparisons.

---

---

Conclusion

Adding multi-column layouts in Squarespace is simple with just a little CSS. It gives your website a professional and polished look, keeps visitors engaged, and helps present information in a more structured format.