I would encourage you to stop thinking in pixels and embrace the
rem if you prefer). When you stop being constrained by
px then it allows the content to determine the break points, not some arbitrary
px widths that you try to squeeze your content into. Also, using
em allows your design to take into account both the view port width and the text size. This is very important for proper accessibility.
I’ve put together a demo of the challenge to demonstrate this concept: http://flowersandkittens.epizy.com/grid/grid.html.
Make your browser as skinny as it will go and then gradually widen it until you have three columns to see how it transitions from a narrow to wide display. Now while at the wide view manually increase the text size to see it transition back to a narrow display. There is not one
px unit in the CSS. It’s all
rems (and a few percentages for the grid columns). Even the CSS break points are in
It is actually quite liberating to do your layouts this way. I never once worried about how things are going to look in this particular mobile device or that particular wide screen desktop browser. You can pretty much forget about all of them. The only thing I concerned myself with is how much room I wanted each of these boxes to have in order to display their content, and I set my break points accordingly to make sure that they always had at least my minimum width requirement. This is what I meant when I said let “the content determine the break points.”
The other thing I highly recommend you always do is use a narrow-first approach. Narrow your browser as skinny as it will go and style your page at that skinny width. This will be your base CSS. Then you can gradually widen and add break points as necessary. It is almost always easier to start narrow and then work your way wider than vice versa.