Minimal - Collection Pages Grid

[LBonn]

I do no write code but feel confident to 'edit' with instructions.

My Collection Page (as in once I click through to a specific collection on my site) has a grid with 5 images wide. 

How can I change it to 3 or maximum 4 images wide on the grid?

Thanks in advance for any assistance.

[KetanKumar]

@LBonn 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[LBonn]

Thank you.

My url is: https://jewellerybylinda.co.uk/

[Topbright]

Hello, I checked your code, you can achieve that easily with a small update on CSS file,

in your CSS file "theme.scss.liquid" check for .grid-link__container

/* theme.scss.liquid */

.grid-uniform.grid-link__container {
    display: grid;
    grid-template-columns: repeat(3 ,1fr); // Number 3 is the columns that you want, you can change to any number
}

then search for "wide--one-fifth"

/* @media only screen and (min-width: 1250px) */
.wide--one-fifth {
    width: 100%;
}

/* @media only screen and (min-width: 769px) and (max-width: 1250px) */
.large--one-quarter {
    width: 25%;
}

/* @media only screen and (max-width: 768px) */
.medium-down--one-half {
    width: 100%;
}

One last thing you need to do to change from 3 colm to 1 for mobile

/* @media only screen and (max-width: 768px) */
.grid-uniform.grid-link__container {
    grid-template-columns: repeat(1 ,1fr);
}

[LBonn]

Thank you so much.

I’ll try that and let you know how I get on

[LBonn]

Topbright - I tried this but it affected all types of things, including the layout of the front home page.

I only need to change the layout of the images on the page accessed by clicking on an individual collection on the collections page.

[Topbright]

Well, in that case, you need to add a new class to the collection, I don't know the structure of your liquid code but I assumed it's on collection.liquid, you gonna search for grid-uniform in your code, remove it, and a new class name then remove more classes for child grid__item medium-down--one-half post-large--one-third. 

/* theme.scss.liquid */

.your_new_class_name {
    display: grid;
    grid-template-columns: repeat(3 ,1fr); /* Number 3 is the columns that you want, you can change to any number */
    grid-gap: 26px; /* Space between columns  */
}

Mobile

/* @media only screen and (max-width: 768px) */
.your_new_class_name  {  /* NOTE: same as the first one that you add  */
    grid-template-columns: repeat(1 ,1fr);
}

Note: this will affect all collections if you want it to be in just one collection you need to create a new one in theme editor > Template then add a new Template

Add a name collection.your_name.liquid

then you need to add a collection page and assign the new template that you created

You can copy the same code in the collection.liquid and put it in the new one with the new classes modification.

[LBonn]

KetanKumar - can you offer a solution?