CSS grid, how to avoid overwriting existing rules

Some great person on here gave me code that produced a “product grid” in CSS grid:

.productGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ); 

grid-auto-rows: minmax(250px, auto); grid-gap: 10px; width: 90%; max-width: 1200px; margin: 0 auto; } 

.product { display: grid; place-content: center; border: 1px solid #999; }

I use it and like it very much. I do need another grid that has different attributes. I don’t want to overwrite the original rules. Would this additonal code, hoodGrid, work without overriding productGrid?:

.hoodGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr) ); 

grid-auto-rows: minmax(330px, auto); grid-gap: 10px; width: 90%; max-width: 1200px; margin: 0 auto; } 

.hoodProduct { display: grid; place-content: center; border: 0px; }

Thanks.