Created attachment 8733013 [details] Moz_column_gutter_px_vs_em.png User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:45.0) Gecko/20100101 Firefox/45.0 Build ID: 20160309193552 Steps to reproduce: tried out http://codepen.io/rachelandrew/pen/BNXyQa at codepen (GridByExample1). Actual results: When i changed the start-values for "grid-template-columns" for the class "wrapper" from 100px 100px 100px to 50px 250px 50px, it renders very uneven gutters/or columns, however when i change to using em, and set to 5em 25em 5em it looks as expected. Expected results: columns and gutters should have even width as per row, irrespective of using px, em or rem.
Created attachment 8733160 [details] testcase The problem is that when you specify a column size of 50px, an item with 20px padding on each side of the text and a large font-size, the item isn't going to fit in the column. Furthermore, the minimum intrinsic width in this case is that size since 'min-width' is 'auto' (by default). (If you specify 'min-width:0' then the item will shrink below that size (due to the default 'justify-self:stretch') and the text will overflow the item's content width into its padding area instead.) The reason the gap between A,B and D,E is different is that the D is slightly wider in the used font. Please also note that when you use 'em' sizes for columns it's the grid container's font-size it's relative to. So if the items' font size are much larger than that it's probably not going to work that well.
This is rendered correctly per spec.