How to create two-column text in Squarespace

content block

Apr 15

Want to create side-by-side text columns on your Squarespace site? In this tutorial, I’ll show you a simple custom code you can use to create two columns of text, plus all the extra tips you need to make sure it looks great on every device.

This video covers how to add and customize your code, adjust the spacing between columns, ensure your design works on mobile, and even apply this layout to just one block of text using its block ID.

You’ll find example codes underneath this video.

Add the Base CSS

Open your Custom CSS panel by going to Website → Website tools → Custom CSS, and add this code, which will tell a computer to display all paragraph (p) text in two columns with a 50-pixel gap in between.

p {
  columns: 2;
  column-gap: 50px;
}

Make It Mobile Friendly

Two columns might look great on desktop, but it can be really hard to read on smaller screens. Wrap your code in a media query, like this example below, to apply it only on screens that are larger than 767px in width:

@media screen and (min-width: 767px) {
  p {
    columns: 2;
    column-gap: 50px;
  }
}

Line Breaks Without the Mess

If you press Enter/Return, you’ll create a new paragraph—and that can mess up the layout across columns.
Instead, press Shift + Return to create a soft line break that keeps your text in the same paragraph but adds a visual break in the content.

Apply It to One Block Only

Want only one block of text to have this two-column layout? Here’s how:

Use a Chrome extension like “Squarespace ID Finder” to get the Block ID. Learn more from my affiliate link here: insidethesquare.co/chromeext
Wrap your CSS like this:

@media screen and (min-width: 767px) {
  #block-1234 p {
    columns: 2;
    column-gap: 50px;
  }
}

Other Selectors You Can Use

p targets all paragraph text
.sqs-block-content targets text inside content blocks
article targets full blog post content
h1, h2, h3, etc. target specific heading styles

With just a few lines of CSS, you can create a clean, professional two-column text layout in Squarespace. Whether you apply it to a single block or across your whole site, this is a great way to improve readability and design. I hope you enjoyed this tutorial, and most importantly, have fun with your website, Squarespacer 💻✨

text