How to handle grid system and layout at different breakpoints when designing wireframes / mockups?

Normally, I start answering: Do I use a limited max-width container or full-width responsive container? Why this matter? Because in e-commerce for big screens (over 1600px) I can keep reorganizing element to fill the whole screen showing 5 or 6 columns of products. And in this case, I will need to design a wireframe/mockup for 4 sizes of screens and not for only 3.

When I'm using limited max-width container I used design for 3 sizes:

1. Mobile (480px) I normally use 480px and make some guide lines for smaller screens like 320px to be certain that will fit for all.
2. Desktop (998x, 1200px and 1980px) I normally use 1980px and make some guide lines for smaller screens like 998px and 1200px to be certain that will fit for all.
3. Tablet (768px) I normally use 768px and make some guide lines for smaller screens like 520px to be certain that will fit for all.

As tablet normally has less access I design in the end. To have a mobile-first, you should "forget" desktop and design mobile-first and then desktop.

The most important thing is thinking how the elements will grow and adapt for each screen keeping the same user experience and the same components priority. You also must think on the clean code without so many breaks and for it as an ex-developer it's easy, but for designers with no code experience, I recommend to talk with developers with wireframes on hands to find the best and simple solution for each component.

See most common breakpoints simplified in an image. You also can search on the web a full list of screen size.

But the best way to define the standard breakpoints on your website if you already have traffic is going to analytics and get most used screen sizes like the image below:

Quite interesting how I had a very similar problem early this week!

So, here's the shorter answer:

Use a responsive grid with consecutively lower number of columns as the device's screen becomes smaller. To ensure that all scenarios are catered for you can then double the number of vertical grids by the actual number of grids that you plan for. Make sure that you set a gutter with of multiples of 8px and that the margins are also in multiples of 8px.

Most modern design software like Sketch or Figma will calculate the required grid sizes accurately for you so that life becomes easier even translating to code.

Onto the actual grids themselves, plan for the smallest grids, in this case the 375px viewport is ideal for mobile, 768px for tablet and 1440px size is ideal for desktop. Next, use the max-width rule, ie the designs for 375px will apply to all screens equal to and less than 375px, the designs for 768px will apply to all screens falling from 768px to 376px viewport width, while the 1440px rules will cater for all screens falling from 1440px - 769px viewport width. I typically like to design one more layout which is 1440px +, which is for all screens larger than 1440px. The larger than 1440px layout typically uses responsive fonts-sizes for looser control and easier legibility from large screens.

Thus I end up with 4 layouts.

I know it may sound boring and un-inspired, but try to simplify your design by initially using wireframes with big blocks to try to envision how the content would react to a shrinking viewport size in a way that makes sense.

Bonus tip: You can use responsive font-sizes but I would recommend resizing according to break points in strict multiples of 4px for font-sizes and and line-heights.

You can also employ responsive svgs for icons, making sure that that total areas covered by the icon units are in multiple of 8 or 4, ie 16px by 16px of 24px by 32px. the actual drown icons itself should be ideally be in multiple of 4px.

This strategy can make text and icons to look sharper on screens.

On this: Since these layouts cover MOST of the ground, do devs usually just tweak the design a small bit when something doesn't fit?

The answer is yes. Well, at least for the Devs I've worked with.

Calculating accurate, responsive rules for grid sizes that accurately match the sizes in CSS can get tricky. He has a solution that can get you started on the journey to finding yours: stackoverflow.com/a/20457076/1811992

You're right, that's how the responsive grid works. We select the most popular screen sizes and proportions, and then we first draw a design for them. In addition, our work is facilitated by the fact that in the world, for example, there are only two operating systems for the majority of devices, Android and iOS, and they have size standards that we can use.

Regarding the design of mockups (hi-fi), the authors above wrote enough information on how to work with them.

Now for the wireframes. Wireframes are created to quickly sketch out layouts, determine the location of layouts, content, controllers, etc. In other words, the base picture. You don't need to plan for responsive grids or breakpoints. All you need to do is make different layouts for the main screen sizes (for example phone, tablet, monitor). More accurately, you can do this in the Mockups (hi-fi) stage.