Squarespace 7.1 - How to Add More Columns to Section Grids

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.

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.

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?

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.

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.

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.

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!

On 7/21/2022 at 5:52 AM, ksachse said:

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.

I am constantly having this issue - it would be amazing to be able to adjust how many columns we can have on each page, even each section. How did you go with this Kaila? Did you find a work around?

See below how I need to have 4 items evenly spaced, but you can't as there ends up being a double column in the middle - in this case I need an odd number of columns.

Hey there Rebecca!  

Here's the way I solved this: Make all your images (or any blocks you have) edge-to-edge. (24 is divisible by 4, so make each one 6 blocks wide.) Then, use the spacing adjustment to add however much gap you want between each. 

In other words... Don't use the blocks to create space between images: use the grid spacing. 

 - Haley