Primitus Consultancy

View Original

How to create 5 equal width column blocks on one row

In this tutorial, you will learn how to create five equal-width column blocks. This technique is especially useful when you want to evenly space out image blocks or markup blocks on your website. To assist you in identifying the necessary elements, I recommend using a Chrome Extension called Squarespace ID Finder (available at https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff). This tool will help you locate the #collection-id, #blockidnumber, and section[data-section-id="#"] that the code needs to be applied to. By following the instructions provided and utilizing the Squarespace ID Finder extension, you'll be able to easily create visually appealing, evenly spaced column blocks on your Squarespace website.

Complexity: Easy



Step 1: Use the following code snippet below.

See this content in the original post

Also, add the following code to have the column stacking on mobile.

See this content in the original post

Step 2: From your Squarespace account, go to the Custom CSS Editor. paste the code into the Custom CSS editor box.