Collection grid 3 columns all same size

[Lucas24]

Hi, I've been looking online a lot but couldn't find a clear guide.
I just want to make a 3 column grid, with pictures of all the same size for my collections page.

What section am I supposed to modify to do so and what lines with what code please ?

Thanks

[Ninthony]

You won't find a clear guide because everyone's store is generally different, so there isn't a catch all of "this is how you make a 3 column grid". The file you're going to want to edit is "collection.liquid" in your templates folder, that's really all I can tell you. I can get your products into a 3 column grid, but it looks like your images are all different dimensions which causes the height of the containers to be different and the prices to display at different heights as well. If you want your images to be the same size you're going to have to commit to a specific set of dimensions. It'll probably take a redesign to achieve what you need.

[KarlOffenberger]

Hi Lucas,

In addition to what Ninthony wrote, I might add that since you're using Brooklyn theme, you have the option to change your collection pages > collection pages section to be grid based styles instead of collage. That is set to 3 columns on desktop view, 2 tablet and 1 mobile.

Best wishes!

[cfar]

Hello Sir, this part of your reply: collection pages > collection pages section to be grid based styles instead of collage. That is set to 3 columns on desktop view, 2 tablet and 1 mobile.

Is there any way to set the columns so that in mobile, we can increase it from 1 to 2?

[Lucas24]

Hi and thanks for your fat replies guys !

@Ninthony
I will eventually make all the images the same size if that can help.
What sort of coding lines should I put in the collection.liquid to achieve what I need ?

@Karl Offenberger
I really can't find this "grid" option for Brooklyn, I really think I've looked everywhere, could you give me a clue where I can find this option ?

[KarlOffenberger]

In your admin, navigate to Online Store > Themes > Customize. Once in the customizer, the top bar, to the right of the Shopify logo contains a drop down which defaults to Home page. Select Collection pages instead and then in the right panel you should see 3 sections: Header, Collections pages and Footer. Select the Collection pages section. Now you will have a select box for Grid style where you can change it from Collage to Grid.

Best wishes!

[davidinottawa99]

@KarlOffenberger 

THANK YOU!

I never even know this configuration existed. I had already edited the mark up to match a 3 column grid! Lol 

[ready_golfer]

@davidinottawa99 

I was thrilled to see your response. Please advise how I can change the code to result in a 3 column grid on tablets.

[davidinottawa99]

As described here:

https://community.shopify.com/c/shopify-design/collection-grid-3-columns-all-same-size/m-p/452770/hi...

there isn't one single solution bc it depends on your theme, templates and existing CSS.

You would need to provide the theme name you are using, or better a URL to your site. 

The overall concept is straight-forward:

https://www.w3schools.com/howto/howto_css_three_columns.asp

https://www.tutorialspoint.com/how-to-create-a-3-column-layout-grid-with-css 

[ready_golfer]

Like @Lucas24 I am using the Brooklyn theme.

I will take a deeper dive into your discoveries. Thanks!

[davidinottawa99]

See attached screenshot - Brooklyn already has the classes for this built-in to the CSS:

https://postimg.cc/RqPxGdBH

Make sure you have tried this approach first:

https://community.shopify.com/c/shopify-design/collection-grid-3-columns-all-same-size/m-p/452773/hi...

[ready_golfer]

@davidinottawa99 

Sorry for the misunderstanding, but I think we may be talking about two separate issues. It's all my fault. My issue is that customers on a tablet will see a 3-column grid in landscape format and a 2-column grid in the portrait format.

Landscape:

Portrait:

I want it to be a 3-column grid, no matter the format.

[Lucas24]

@Karl Offenberger : Perfect that's exactly what I needed !