material-components-android
material-components-android copied to clipboard
Margin/gutter recommendation leading to column size not being on grid
Description:
On https://material.io/design/layout/responsive-layout-grid.html#breakpoints the table states:
Or in words: For a width of 360dp use margins/gutters of 16dp and 4 columns.
4 columns mean 3 gutters. The remaining width for the 4 columns is therefore given as:
360 - 2 x margin - 3 x gutter = 360 - 2 x 16 - 3 x 16 = 360 - 5 x 16 = 280
So the width of one column is
280 / 4 = 70
But 70 is not a multiple of the 8-grid.
Visualizing in Sketch one ends up with this:
For obvious reasons only the first column starting at 16 is aligned to the 8-grid, while the end of the first column is not aligned to the 8-grid (as it ends on 16 + 70 = 86, which is not dividable by 8), same for e.g. the start of the second column and so on.
Expected behavior: Describe best practice for this on the documentation. E.g. shall one increase the width of the columns to 72 and decrease the gutter accordingly? I am myself a beginner and I am highly confused by the fact that there are on the hand clear spacing guidelines and a defined grid, on the other hand on my first attempt I have to realize it's not possible to do it like this. Please advice what's best practice. Thanks for any guidance on that.
Also, I didn't know where this fits best. It's not directly about the components, but I also couldn't find a repository just for the guidelines.