How to snap columns to grid in Material?

Question

material design

A little puzzled by the fact that the Material Design guidelines show examples with devices in 360px (4 columns), 600px (8 columns), 1280px (12 columns).

If we put a grid at these screen sizes, with a density of 8px, then the columns go beyond the boundaries of the grid. I understand that this should not be so, so I'm interested in how they can be properly tied.

PS I'm also interested in what screen sizes you are designing for? Is it always 360px or 320px if it's mobile? What size for a tablet, laptop, desktop will be appropriate, in which the grid and columns are "friendly"?

PPS I am designing a dashboard for a portfolio, and I wanted to present a detailed case using Material.

Answer 1

Hello sketch tool !
The guideline does not specify 360 px and not 600 px, but 360 dp and 600 dp. There is a difference between these values. I advise you to refer to the guideline again, because. I don't have much knowledge in this area and so I don't inadvertently misinform you.
https://material.io/design/layout/pixel-density.ht...
But there is experience in creating a grid.
For example, I made a Dashboard with 12 columns and 12 rows and it helped me to neatly arrange the elements on the layout.
I also used columns for the bottom navigation on the mobile version of the site. The number of columns strictly depends on the number of elements in the navigation bar. For example, if I have Search, Menu and Profile in it, then there will be 3 columns in it.
And yet, try to look at other works that will use speakers in any way, so that you can understand for yourself the necessary proportions of the speakers for each type of device.
I hope I helped you with the answer.
Good luck!