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.

On 8/18/2023 at 6:51 AM, haleysive said:

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

This is how I tend to do it, I would still like a bit more of a gap, but its OK.
Edge to edge to then scale the gap.

On 7/27/2022 at 2:42 PM, 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.

I don't disagree with the points made here. Unfortunately, Squarespace isn't addressing the actual problem the Fluid Engine grid has: column rigidity.

Try making 4 boxes side-by-side on the grid — see 4 box screenshot. Red means its a FAIL. Note the double column in the middle. This happens on 2, 4, 6 boxes and so on.

Now take a look at my 3 box screenshot. Notice the the red FAIL boxes. We can't make 3 wide boxes line up evenly. The only way to do 3 is by wasting valuable space on the left and right sides — see green boxes.

We should be able to make evenly-spaced boxes on a layout with Squarespace in the year 2024. We can't.

This is a take-it-or-leave-it grid. It has some amazing flexibility and creative potential, but it's only as strong as its biggest weakness. Sadly, it's missing an 800lb leg to stand on when it comes to the most basic layout needs and expectations.

The issue needs to be solved, not overlooked or downplayed. It's a huge disadvantage vs similar platforms that can accomplish this with ease.

On 8/18/2023 at 1:51 AM, haleysive said:

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

Unfortunately, this workaround only works on desktop. It doesn't solve the problem.

Try looking at it on mobile preview. Doing this shifts all content off-center to the right when you use grid spacing. Grid spacing is basically useless, because it doesn't render well on mobile. We can't have our content presented off-center just because we widened column spacing on desktop. It's a real bummer.

Also, the column spacing is limited by how wide you can even make it. These are fundamental problems that need to be resolved in the layout engine.

11 minutes ago, birdmade said:

While I don't disagree with the points made here, they are excuses that don't solve the actual problem at hand: column rigidity.

I am not making excuses. Simply trying to provide some kind of mental framework for how SS may have gotten to where they did with FE. Since SS doesn't disclose their internal thinking on just about anything they do, I'm speculating. Personally I dislike FE.

10 minutes ago, creedon said:

I am not making excuses. Simply trying to provide some kind of mental framework for how SS may have gotten to where they did with FE. Since SS doesn't disclose their internal thinking on just about anything they do, I'm speculating. Personally I dislike FE.

You're right. They are speculations, not excuses. I used the wrong word to describe the issue. I'll edit the post. Thanks for the clarification! I have many concerns with FE as well. 

Odd number of columns on a Mobile device

The 8 column limit on the Mobile display is even more restrictive, but if the images/text blocks don't all need to be of equal width then 2+4+2 =8  or  1+2+2+2+1 = 8 both work quite nicely.

I'm replicating a 9x3 parallelogram World Map element, that's tessellated, and using it as a menu, and as a minigame, so that folks will come to better understand how the World Map hangs together. Including the edges of the adjacent blocks makes the structure a lot more obvious. Consequently I needed 5 columns:  fringe, BLOCK, BLOCK, BLOCK, fringe

All of the pages can be accessed through the normal dropdown menus of course, but the Elven and Human details are slightly different, which forces one to use sub-sub-sub menus.

Now that I have the imaging working to my satisfaction, I'm working on some JavaScript that will Checkbox ALL of the similar elements. Then clicking on an element that's ALREADY checked (we're using a Reset rather than toggling the Checkboxes) will generate a Concatenated link, Race+City+Relic, that will jump directly to the targeted subpage.  

If you're curious about a work-in-progress, check out Elven Pathways on your Mobile.