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.

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

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