Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Squarespace 7.1 - How to Add More Columns to Section Grids


Recommended Posts

Site URL: https://bit.ly/3aWR8tp

I am using 7.1 with the new design upgrade including gridded sections.

I have a page that I want to add (5) side-by-side buttons, and they are each 3 grid blocks wide by 1 tall.

The grid only seems to allow for an equal number of columns, so aligning my buttons starting from the center of the grid is impossible, and reducing each button down to 2x1 also isn't possible due to font size (don't want to make smaller.)
Additionally, making 4x1 is too big.

Does anyone know how to adjust the number of columns for a grid?
Currently only seeing how to adjust number of rows.

Screen Shot 2022-07-20 at 12.51.35 PM.png

Kaila S
Shopify Partner, Squarespace Circle Member & MailChimp Expert

yumari digital
websites · email campaigns · ads · social media · graphic design

 

 

Link to comment

Hi Kaila,

You are using the new Fluid Engine editor. its 24 columns for the grid. if you want to change spacing for the grid, you can try to click to open your section editor and adjust "gap" this will give you the option to flush buttons or other blocks closer together.   What do you mean by "side-by-side buttons"--that you want them closer to each other ?  see screenshots.

fluid-engine-section-editor-gap-1.png

fluid-engine-section-editor-gap-2.png

Link to comment

I also need to increase section grid column count. Blocks snap to the grid, and at 24 columns, the grid is too chunky for fine positioning. The set number of columns also restricts equal distribution of peer elements across the page. 

Can we adjust the section column count?

If not, is it an implementation by Squarespace, or limitation of the underlying CSS grid technology?

Link to comment
7 hours ago, gregaitch said:

is it an implementation by Squarespace, or limitation of the underlying CSS grid technology?

CSS grid like any technique will have limitations at some point. I'm not aware of any official stated limitation. The limitations you are likely to run into is how various browsers handle rendering the grid. Making calculations and such takes memory, taxes the performance capabilities of the browser, computer, and even the network. The other thing to consider is not everyone has the latest and greatest of all these pieces of the pie.

So with that in mind SS may have done some testing to find a balance between too many columns and too few. Or they could have done something simple like hey 12 columns in the classic editor isn't enough fine grain control and went to 24.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 1 month later...
On 7/26/2022 at 11:13 AM, WendyLW said:

Hi Kaila,

You are using the new Fluid Engine editor. its 24 columns for the grid. if you want to change spacing for the grid, you can try to click to open your section editor and adjust "gap" this will give you the option to flush buttons or other blocks closer together.   What do you mean by "side-by-side buttons"--that you want them closer to each other ?  see screenshots.

fluid-engine-section-editor-gap-1.png

fluid-engine-section-editor-gap-2.png

Ultimately would want to adjust the number of columns to an odd number to allow for centering blocks that are measured in odd numbers. 

For example, it's impossible to page-center a block that measures 3 columns on a 24-column grid.

Understanding though that adjusting the number of columns is not a possibility.

Edited by ksachse
Kaila S
Shopify Partner, Squarespace Circle Member & MailChimp Expert

yumari digital
websites · email campaigns · ads · social media · graphic design

 

 

Link to comment
On 7/27/2022 at 11:42 AM, creedon said:

CSS grid like any technique will have limitations at some point. I'm not aware of any official stated limitation. The limitations you are likely to run into is how various browsers handle rendering the grid. Making calculations and such takes memory, taxes the performance capabilities of the browser, computer, and even the network. The other thing to consider is not everyone has the latest and greatest of all these pieces of the pie.

So with that in mind SS may have done some testing to find a balance between too many columns and too few. Or they could have done something simple like hey 12 columns in the classic editor isn't enough fine grain control and went to 24.

This is a great theory, thank you for sharing!

Kaila S
Shopify Partner, Squarespace Circle Member & MailChimp Expert

yumari digital
websites · email campaigns · ads · social media · graphic design

 

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...