Creating a grid of referenced Commerce products
This is possible out of the box without any custom code, just plain Views. The trick is to make the View based on content of whatever your node type is and set a relationship from the node to the products referenced by its product reference field. Once you have product fields available to the View, Commerce 1.x provides a per-variation Add to Cart form field to drop into the View.
I created a sample View that does this, placing it in a block on node pages of my product display node type. It uses a contextual filter to determine the node ID from the URL, joins to the products via the relationship I described above, and then shows the product title, price, and Add to Cart form in a grid:

Note that the line items added via the product Add to Cart forms do not maintain the context of the node; that's why &quot;Product Three&quot; is rendered as a link in my cart but Two and One are not. It would take custom code to ensure those forms have the appropriate context at this point, but that's another question.
In case you're a visual learner, here's the View I constructed to make this work: