Hi Ludovic,

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!

Written by

Product Designer. Jury at Awwwards. eSports enthusiast. Bonafide nerd. Ketogenic foodie. Sarcastic and crass INTJ.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store