Good question. This is a common pattern and there’s a couple ways to handle it. If your purchase details are always going to be fixed to the right side of the screen like a drawer (like flushed to the right), you could treat that as a 4 column grid on its own, and then have the content in the middle with its own 12 column grid. So now you have 2 grids going on on the same page. If you have them both centered, you should use 3–4 columns for the purchase details, and 8–9 columns for the content. It’s preferable in these designs to have a large desktop grid as you will find that your content ends up feeling small. Hope that helps!