Jump to content

Squarespace website grid help

Go to solution Solved by SPR_85,

Recommended Posts

Squarespace newbie here. I'm creating an image gallery using fluid engine. I've resized some of my images to be 1080x1080 (square). When I drop them into my page and use the website grid to position them, they don't seem to be fitting properly. Is there a reason the website grid isn't to a standard resolution? 
 
Is there a way to know how large the grid sections are on Squarespace, so I can work backwards and resize my images to fit the grid? Hope that makes sense.
 
If there is a simpler way to do this, or if I'm missing something obvious, please let me know!
 
Using 7.1 and on a trial.

Screenshot 2023-09-05 at 11.48.21.png

Edited by SPR_85
Link to comment
  • SPR_85 changed the title to Squarespace website grid help
  • Replies 4
  • Views 2.3k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

@SPR_85  Welcome to the Squarespace community! Instead of measuring the grid, there are a couple of easy things you can do to get your images to display differently:

1. You can center them horizontally and vertically so that they remain square and centered inside the image box. That way you can set up all your images to have the same size image block and your images can appear as you intended them. 

Screenshot2023-09-04at9_13_35PM.thumb.png.0a271ec5789d07389afeb1c40555e520.png

 

 

 

 

 

 

 

 

 

 

 

 

2. If it doesn't matter if they are square, you can select 'fill' and the image will expand so that the gaps disappear.

Screenshot2023-09-04at9_13_58PM.thumb.png.767dd58efef59871c9385da441cc2bfe.png

 

 

 

 

 

 

 

3. If you have a number of images, you can set up a Grid Gallery and upload the images there. You can adjust how many images are in a row and what the padding is between them.

Screenshot2023-09-04at9_16_29PM.thumb.png.afe872d716e320e1cc57b7558ecdd357.png

 

Did I help? Click 👍 or mark it as the solution! This helps others find the answers they need. 

Meghan | Westerly Creative Studio
  
 🍪  Still need your website policies?
Termageddon makes it easy.  
Get 10% off your first year! (< affiliate link) 

Link to comment

 @WCS thank you.

I've now played around and found spacers the easiest way to create the grid layout I want. But I'm stuck on how to use spacers to vary my image widths (I can create multiple columns but can't revert back to 1 column!)

I have 3 columns in the attached for 3 images. I now want to add 1x spacer running the full width below this, so I can then insert a full width image. I have looked at several tutorials and tried dragging the spacer but still cannot figure out how to do this without changing the layout completely!

I've tried inserting a full width text box then a full width spacer and deleting the text box, but the padding isn't right. There must be an easier way! Please help.

image.thumb.png.8ad10a0c19f634ae1a716d36b37e3c89.png

 

 

Link to comment

@SPR_85  It seems like you were able to get a full-width spacer bar but the space above was too large -- correct? You've also switched from Fluid Engine to Classic Editor?

 

Edited by WCS

Did I help? Click 👍 or mark it as the solution! This helps others find the answers they need. 

Meghan | Westerly Creative Studio
  
 🍪  Still need your website policies?
Termageddon makes it easy.  
Get 10% off your first year! (< affiliate link) 

Link to comment
  • Solution

@WCS yes that's correct - is it possible to add a full width spacer but to the existing section (below my 3 columns / images) so the padding matches the rest of my overall image grid? 

And yes - it looks like I have switched back to Classic Editor! This seems easier 🙂

Thank you

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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.