How to adjust product grid in Dawn theme? Size and number of products in rows

Store Design

Topic summary

Main issue: Adjust the Dawn theme product grid to show 3 products per row (instead of 4) and reduce product image size.

  • A CSS solution was proposed: add a media query in base.css to set .grid__item width to roughly 33.33% minus horizontal spacing (using calc and var(–grid-desktop-horizontal-spacing)).
  • Initially, the change did not take effect; moving the CSS higher in base.css (order/cascade) resolved it. Outcome: 3-per-row layout achieved with adjusted horizontal spacing.
  • Image size adjustments were requested but not addressed with a specific solution in this thread.
  • A screenshot was shared to show where to place the CSS in base.css, which was central to resolving the issue.
  • An additional request asks how to add vertical spacing between product rows; this remains unanswered.

Notes:

  • base.css is the theme’s stylesheet; CSS cascade/order affects which rules apply.
  • The media query targets screens wider than 750px to control desktop grid columns.

Status: Partially resolved (3-per-row achieved). Image resizing and vertical spacing remain open.

Summarized with AI on February 13. AI used: gpt-5.
1

I’ve been browsing around discussion pages and cannot find a solution or code to edit this.

Here is one product page:
https://yi-gallery-shop.myshopify.com/collections/poster
I would like to have 3 products per row, not 4.

Another issue, I would like to edit the size of the product images… They are very large.
For example, this page that only has a few items:
https://yi-gallery-shop.myshopify.com/collections/exhibition-catalog
How can I edit the image sizes in the product grid?

Thank you for all your help!

2

Hi @gallery_yi ,

Go to Assets > base.css and paste this at the bottom of the file:

@media screen and (min-width: 750px) {
	#product-grid .grid__item {
		width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3) !important;
		max-width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3) !important;
	}
}

Hope it helps!

3

Hey @LitCommerce ,

No it didn’t.
Do I need to remove part of the base.css first?

Nothing about the product grid changed with that code added:
https://yi-gallery-shop.myshopify.com/collections/poster

4

Hi @gallery_yi ,

Can you try moving the code up here?

Screenshot.png
Screenshot.png894×925 39.1 KB

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

5

It worked-- thank you so much for your help :slightly_smiling_face:

1 Like
6

Hi, This helped in creating horizontal spacing. Please help me in creating vertical spacing between 2 products as well. Really Thanks in advance.