Add grid around products to store pages

Hello! I would like to add a grid around my products in the store page, for example, like this- https://store.pioneerworks.org/collections/art

Any advice?

Thank you!

My site: collarworks.org

You can use this code to Website Tools (under Not Linked) > Custom CSS

(this code for products 3 columns, if you change to 2, 4, 5...it won't work)

@media screen and (min-width:992px) {
body.view-list section.products.collection-content-wrapper.products-list {
}

div.grid-item {
    border: 1px solid black;
    padding: 30px;
}

.products.collection-content-wrapper .list-grid {
    grid-gap: 0 !important;
}

div.grid-item:nth-child(3n) {
    border-left: 0 !important;
    border-bottom: 0 !important;
}

div.grid-item:nth-child(3n+1):not(:last-child) {
    border-right: 0 !important;
    border-bottom: 0 !important;
}

div.grid-item:nth-child(2n+2) {
    border-bottom: 0 !important;
}
div.grid-item:last-child, div.grid-item:nth-last-child(-n+3) {
    border-bottom: 1px solid black !important;
}
}

Thank you! Is there a way to make it so the rows extend all the way to the left and right of the page, so the grid is not closed on the sides? 

Also, what would the code be for 4 columns? thank you!!!

On 1/6/2024 at 3:20 AM, emilynola said:

Thank you! Is there a way to make it so the rows extend all the way to the left and right of the page, so the grid is not closed on the sides? 

Also, what would the code be for 4 columns? thank you!!!

#1. You mean remove this?

#2. You can change shop 4 columns, I can test code easier

Correct! remove the lines indicated and have the horizontal lines run to the edges of the page. I changed the shop to 4 columns.

Also, if you know how to remove the gray line at the top, I would like to get rid of that too!

On 10/24/2023 at 1:58 AM, emilynola said:

Hello! I would like to add a grid around my products in the store page, for example, like this- https://store.pioneerworks.org/collections/art

Any advice?

 

Thank you!

 

My site: collarworks.org

404 now