Nailed it! THank you, first time diving into SquareSpace and after figuring out I was adding an extra space in one section, I got it all to work. Thank you!!
Thank you for the tutorial, very interesting. For anyone trying in 7.1 I got it to work using .gallery-grid-wrapper and figure:nth-of-type(x). In .gallery-grid-wrapper add grid-template-columns: none !important; to override the grid layout set by Squarespace.
Hi, I almost got it to work by following your steps. But I can get it to work - under grid-template-columns: i should add none: (?) or smth else. Should it be also grid- column: small1; rather than grid-area: small1; ? thakyouuu
Chris! This is so amazing! I tried to create something like this for a footer idea I had about six months ago and failed so terribly 😅So looking forward to getting to use this on another project soon. Thank you for sharing your brain with us!
hey brother. How would I bypass the image resizing parameter that my Squarespace store forces on item pictures? I have a great zoom script running but i'm not getting much out of it because the store page is downsizing my images.
Okay cool thanks, do you have any advice on best way to do this? Can I do it with a gallery index still? As I want to tag my images and you can’t do this image blocks add a tag on them
Love this! Thank you! I have 11 thumbnails in the gallery I'm working on and I was wondering if it is possible for the remaining to be hidden under a "show more button?
Hi Kaylie, unfortunately I don't know of a way that could be accomplished. It would definitely require jQuery though and could not be done solely with CSS.
Nice! I managed to make it work now, thanks :) One more question, how can I add the hover effect? Zoom/fade to black/text show up. I think that makes it much more dynamic! Thanks mate
Hey, thanks so much for this video. Would you know how to apply this to Squarespace 7.1? I am working with this ( virginsuncare.com/ingredients ) but I am having trouble aligning the bottom of these individual image blocks.
could I somehow us this to approach centering my product page and related product section galleries? For example: Row 1 - 3 items, Row two(incomplete row) has 2 items. I'm trying to center the images in the container instead of them being left aligned.
I don't think this would be the best solution for that to be honest, it would be complex and probably overkill. This works very specifically on the index gallery because of its structure but I wouldn't recommend CSS grid for all cases. For simple centering flexbox would probably work better.
How would you determine optimal image sizes to fit within gird sections? If I have a collection of same sized images and place 3 into a 5 column grid "image1 image1 image1 image2 image3" then image 2 and 3 end up pretty cropped.
Yeah you would want to place the images based on aspect ratio. So the images you place in the big Squares would need to be taller than the images in the smaller squares.
Css grid relies on a parent container to become the grid and the children items to become the grid items. So yes, theoretically each block element in a row could become grid elements within the row's grid.
@@SEWebDesign It does!!!!!! wildeyedcreativeco.squarespace.com/css-grid Only thing cant figure out is how to make something 3 columns wide. I want the text to be 1 more column wide but when i add another column it all explodes haha.
I don't understand how you created this in the first place. I also cannot find index gallery in my site styles. Do you first create a Gallery page in "not-linked" then add that gallery to the index page? Or do you add the gallery index box?
Thank you so much. I figured it out and am making decent progress. Just can’t figure out how to not have to list certain articles in my grid for mobile now. Any advice on that is helpful and greatly appreciated!
Hello my friend! You are truly an inspiration, I'm trying to adapt this index gallery into my website but i cant do it. Is it possible to send me a little bit of the CSS that you created? thank you so much. Continue the great videos :)
This was written specifically for the 7.0 brine template, so if you are using a 7.1 template then this will not work. Unfortunately I no longer have the CSS, This was more to show what is possible than a tutorial.
@@donnatapay923 unfortunately I do not at this time. I might plan something for the future. If you need immediate help, you can schedule a 1:1 training through my website!
Nailed it! THank you, first time diving into SquareSpace and after figuring out I was adding an extra space in one section, I got it all to work. Thank you!!
Thank you for the tutorial, very interesting. For anyone trying in 7.1 I got it to work using .gallery-grid-wrapper and figure:nth-of-type(x). In .gallery-grid-wrapper add grid-template-columns: none !important; to override the grid layout set by Squarespace.
Hi, I almost got it to work by following your steps. But I can get it to work - under grid-template-columns: i should add none: (?) or smth else. Should it be also grid- column: small1; rather than grid-area: small1; ? thakyouuu
I dont want to update to 7.1 still on 7.0. Trying to add more grid pictures to my site, but is not working anymore. It simple doesn't do anything :(
🤗 Easy to follow - really awesome video, thank you!
I'm glad you liked it Gemma!
Chris! This is so amazing! I tried to create something like this for a footer idea I had about six months ago and failed so terribly 😅So looking forward to getting to use this on another project soon. Thank you for sharing your brain with us!
Omg! I've been looking for this!
Awesome! So glad it will help!
Can you do an updated tutorial for 7.1?
hey brother. How would I bypass the image resizing parameter that my Squarespace store forces on item pictures? I have a great zoom script running but i'm not getting much out of it because the store page is downsizing my images.
Hi Elijah, I'm sorry I am not sure about that one! The resizing is handled by javascript and I am not an expert at that yet.
Would i be able to add more images into this when done as using it for my portfolio page so would want too add to it as time goes on
This CSS is for a set number of items, but CSS grid can be used to create layouts like this for unlimited numbers of items.
Okay cool thanks, do you have any advice on best way to do this? Can I do it with a gallery index still? As I want to tag my images and you can’t do this image blocks add a tag on them
@@aprilpowell6672 you can hire me to write the CSS for you through my website if you would like
Love this! Thank you! I have 11 thumbnails in the gallery I'm working on and I was wondering if it is possible for the remaining to be hidden under a "show more button?
Hi Kaylie, unfortunately I don't know of a way that could be accomplished. It would definitely require jQuery though and could not be done solely with CSS.
@@SEWebDesign Okay!! I think I figured out another solution. Thank you so much for these videos they're life-saving!
Nice! I managed to make it work now, thanks :) One more question, how can I add the hover effect? Zoom/fade to black/text show up. I think that makes it much more dynamic! Thanks mate
Hey, thanks so much for this video. Would you know how to apply this to Squarespace 7.1? I am working with this ( virginsuncare.com/ingredients ) but I am having trouble aligning the bottom of these individual image blocks.
This was for the index gallery in brine 7.0 so I dont think you can apply it to regular image blocks in 7.1.
@@SEWebDesign I would like to know a similar solution to version 7.1 as well;-)
could I somehow us this to approach centering my product page and related product section galleries? For example: Row 1 - 3 items, Row two(incomplete row) has 2 items. I'm trying to center the images in the container instead of them being left aligned.
I don't think this would be the best solution for that to be honest, it would be complex and probably overkill. This works very specifically on the index gallery because of its structure but I wouldn't recommend CSS grid for all cases.
For simple centering flexbox would probably work better.
How would you determine optimal image sizes to fit within gird sections? If I have a collection of same sized images and place 3 into a 5 column grid "image1 image1 image1 image2 image3" then image 2 and 3 end up pretty cropped.
Yeah you would want to place the images based on aspect ratio. So the images you place in the big Squares would need to be taller than the images in the smaller squares.
Can this same method be used for non image based layouts? Like say I had 3 images blocks and 4 text blocks i wanted to do this with?
Css grid relies on a parent container to become the grid and the children items to become the grid items. So yes, theoretically each block element in a row could become grid elements within the row's grid.
@@SEWebDesign It does!!!!!!
wildeyedcreativeco.squarespace.com/css-grid
Only thing cant figure out is how to make something 3 columns wide. I want the text to be 1 more column wide but when i add another column it all explodes haha.
I don't understand how you created this in the first place. I also cannot find index gallery in my site styles. Do you first create a Gallery page in "not-linked" then add that gallery to the index page? Or do you add the gallery index box?
I am using the Brine template where galleries are an option you can add to index pages.
Thank you so much. I figured it out and am making decent progress. Just can’t figure out how to not have to list certain articles in my grid for mobile now. Any advice on that is helpful and greatly appreciated!
How would you go about adding more columns or rows? It seems like the default number of rows is 3.
In this video I have 4 columns and three rows. You should be able to add more of each by laying them out in the CSS. Is it not working for you?
@@SEWebDesign Would I use grid-template-rows and grid-template-columns to do that?
@@abbyw6945 you will need to map them out under grid-template-areas
Hello my friend! You are truly an inspiration, I'm trying to adapt this index gallery into my website but i cant do it. Is it possible to send me a little bit of the CSS that you created? thank you so much. Continue the great videos :)
This was written specifically for the 7.0 brine template, so if you are using a 7.1 template then this will not work. Unfortunately I no longer have the CSS, This was more to show what is possible than a tutorial.
Does it works with gallery grid block?
This code is specifically for index galleries, but the same logic could be applied to gallery blocks. The classes would just need to be tweaked
Is this applicable to 7.1?
This was written specifically for the Brine 7.0 template.
@@SEWebDesign do you have a similar tutorial for 7.1?
@@donnatapay923 unfortunately I do not at this time. I might plan something for the future. If you need immediate help, you can schedule a 1:1 training through my website!
@@SEWebDesign thanks! I will do.
pls source code