Decide on your target screens & layouts

After you have selected the grid layout, define your screen dimensions. If you design a website, you need to account for at least three types of screens: desktop, phone, and tablet. Other factors to consider are the product's content and the target audience's device preferences.

Web frameworks like Bootstrap or Foundation have default responsive grids. For example, Bootstrap’s tablet portrait mode width is 768px while smartphone max width is 480px. If you work with a design tool, you can customize breakpoints by clicking and setting the dimensions. But as soon as you start translating your design from a graphic design tool to a browser, breakpoints are set using CSS Media Queries.^[1]