henryscho Posted October 11, 2023 Posted October 11, 2023 I am trying to customise my portfolio grid to have 2 thumbnails on the top row and 3 on the next. I am trying to make it like this: https://finchcompany.com/atticus/ Here's my site for reference, it currently has 3 items per row which I would like to customise like the site above: https://www.henryschofield.co/ Any help would be greatly appreciated! Thank you in advance!!
Solution Vigasan Posted October 12, 2023 Solution Posted October 12, 2023 (edited) Add this to CUSTOM CSS. The nth-child(1) and nth-child(2) tells the code to make the 1st and 2nd items 50% width, so if you want other items to also be that width, just continue adding numbers as needed. The code is also set to only work on desktop/tablet and exclude mobile so it'll default to the 1 item per column on mobile. /* Edit 1st and 2nd item to take up half the width each */ @media screen and (min-width: 768px){ [data-section-id="62bcca449ab7dc3cf5f03996"] { .portfolio-grid-overlay { grid-template-columns: repeat(6, 2fr) !important; } .portfolio-grid-overlay .grid-item{ grid-column: span 2 !important; } .portfolio-grid-overlay .grid-item:nth-child(1), .portfolio-grid-overlay .grid-item:nth-child(2){ grid-column: span 3 !important; } } } Edited October 12, 2023 by Vigasan tuanphan 1 If an answer I provide helps you, please mark it as the answer so others can easily access it as well. I'm a Squarespace Authorized Trainer, Squarespace Expert, and Circle Member and I've been helping my clients as well as those here in the forum and in various Squarespace groups with custom coding and support for Squarespace websites. I would love to help you in any way I can. Squarespace Plugins | Book Live Help | Squarespace Video Tutorials | Buy Me a Coffee
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment