material-components-android icon indicating copy to clipboard operation
material-components-android copied to clipboard

Margin/gutter recommendation leading to column size not being on grid

Open wondering639 opened this issue 5 years ago • 0 comments

Description: On https://material.io/design/layout/responsive-layout-grid.html#breakpoints the table states: image

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: image 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.

wondering639 avatar Dec 20 '19 14:12 wondering639