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 By following the instructions provided and utilising the Squarespace ID Finder extension, you will be able to create visually appealing, evenly spaced column blocks on your Squarespace website with ease. Note this code will not work on Squarespace 7.1 Fluild Engine.

Table of Contents

• Why Create 5 Equal Columns

• Step-by-Step Instructions

• Key Takeaways

• FAQs

• Conclusion

Why Create 5 Equal Columns?

• Design Flexibility: Break free from Squarespace’s 2–4 column limit and customise layouts to suit your content needs.

• Professional Layouts: Present services, team members, or product features in a balanced, well-structured format.

• Responsive Visuals: Equal-width columns create clean, harmonious designs—especially useful for showcasing uniform content blocks.

Complexity: Easy

---

Step-by-Step Instructions

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 and paste the code into the Custom CSS editor box.

---

Key Takeaways

• This method gives you better layout control and design flexibility.

• Make sure your custom blocks are mobile-friendly by using media queries.

FAQs

Will this work with images or buttons inside each column?
Yes! You can place any content (images, text, buttons) inside each .five-col-item div.

Can I adjust the spacing between columns?
Absolutely. Change the gap: 20px value in the CSS to increase or decrease spacing.

What happens on mobile?
On screens smaller than 768px, each column will stack vertically to ensure readability and mobile responsiveness.

---

---

Conclusion

Creating a 5-column layout on Squarespace might seem restrictive at first, however, you can achieve a balanced, responsive design that enhances the functionality and professionalism of your site.