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.

//equal size blocks//
section[data-section-id="#"] {
  .sqs-col-3, .sqs-col-2 {
    width: 20% !important; 
  }
}

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

@media only screen and (max-width:640px) { 
  section[data-section-id="#"] {
  .sqs-col-3, .sqs-col-2 {
    width: 100% !important; 
  }
}
}

---

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