How to find out what should be the content part of adaptive layouts?

Question

Adaptive design

How to find out what should be the content part of adaptive layouts?
let's say I decided on the monitor values:
320 or 480 - phones / smartphones
800 - smartphones / tablets
1024 - laptops / tablets
1280 - desktops / tablets / laptops
1600 - desktops
What workspaces they should have (for content)
The only thing I know :
320 or 480 - phones / smartphones
800 - smartphones / tablets
1024 - laptops / tablets (content part 960 pixels)
1280 - desktops / tablets / laptops
1600 - desktops
1024 - 960 (content part)
And what about the rest? How to calculate?
2. And how to use modular grid generators (what should be the indents, columns, etc.)?
Thank you!

Answer 1

1. It all depends on the layout design. Usually on smartphones, this is one column, on tablets in portrait orientation, two. On desktops, as you wish, or as the framework limits you.
2. Here, too, everything depends on the design of the layout - what is the width of one column, the indent and how many columns are used in the modular grid. The calculation formula can be found here. I advise you to try to write a modular grid on your own based on an article in pure CSS. If you don’t want to understand, download the Bootstrap sources and change the values ​​​​of the corresponding variables in the variables.less file, after which you compile everything into CSS (you can also do this on the Bootstrap website and download a ready-made CSS file). If you are familiar with LESS, try to figure out how the modular grid is generated from the Bootstrap sources and write your own.