If you think a bug might affect users in the 57 release, please set the correct tracking and status flags for Release Management.

grid-template-columns declaration in px uneven gutter

RESOLVED INVALID

Status

()

Core
Layout
RESOLVED INVALID
2 years ago
2 years ago

People

(Reporter: snabbakort, Unassigned)

Tracking

({testcase})

45 Branch
x86_64
Linux
testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

(Reporter)

Description

2 years ago
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.

Updated

2 years ago
Component: Untriaged → CSS Parsing and Computation
Product: Firefox → Core
(Reporter)

Updated

2 years ago
OS: Unspecified → Linux
Hardware: Unspecified → x86_64
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.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 2 years ago
Component: CSS Parsing and Computation → Layout
Keywords: testcase
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.