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

This tutorial shows you how to create a multi-column text block using css. This is a nifty css trick which allows you to create the multi-column text blocks with only two properties. This also renders a better display than have multiple text blocks.

Complexity: Easy

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 (https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff) which I fully recommend.

1: Add text to the text block

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

2: Add the CSS code to your website.

Then set the CSS properties

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

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

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

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

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