[css-grid] gap is not honored with collapsed tracks (due to auto-fit) and align-items center or end
Reported by
gtk2kri...@gmail.com,
Jan 14 2018
|
||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36 Example URL: https://codepen.io/gtk2k/pen/jYpEpx Steps to reproduce the problem: 1. https://codepen.io/gtk2k/pen/jYpEpxにアクセス 2. CSS #containerのgrid-gapを17px以下に設定 3. グリッドレイアウトされた最後の行のギャップが小さくなる。 (18px以上に設定すると小さくならない) What is the expected behavior? What went wrong? わかりません。 Does it occur on multiple sites: N/A Is it a problem with a plugin? N/A Did this work before? N/A Does this work in other browsers? N/A Chrome version: 63.0.3239.132 Channel: stable OS Version: 10.0 Flash Version:
,
Jan 16 2018
Reporter@ Thanks for the issue. Able to reproduce this issue on Windows 10, Mac OS 10.12.6 and Ubuntu 14.04 on the latest Canary 65.0.3322.3 and Stable 63.0.3239.132 by following the steps mentioned in the original comment. Note: Upto Chrome build 57.0.2928.0, on navigating to the above URL, only a single grid is seen. From Chrome build 57.0.2929.0 onwards, the gap of the last row between the grid becomes small. Attached is the screen shots for reference. Marking this issue as Untriaged and requesting someone from Dev to please look into this issue. Thanks..
,
Jan 26 2018
,
Jan 26 2018
The issue is reproducible in the following reduced test case: https://codepen.io/mrego/pen/XVvNom The gap on the last rows is smaller than it should be. If you change align-items to "stretch" or "start" the issue is gone. If you change it to "end" the issue is different, but it's still wrong. Note that it doesn't happen for columns.
,
Feb 1 2018
I'm not working on this right now, so marking as available.
,
Sep 25
The problem affects auto-fit, not auto-fill.
,
Sep 26
> Note that it doesn't happen for columns. In fact it also happens for columns, this problem affects grid items adjacent to a collapsed row or column. https://codepen.io/mrego/pen/XVvNom only shows the problem for rows because there is a collapsed row at the end, but no collapsed column. https://codepen.io/anon/pen/qMeQMQ shows a grid item which is shifted both upwards and leftwards.
,
Sep 28
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/be21183bfc8dc2101a599b5cbcc9aaa0faac0bc6 commit be21183bfc8dc2101a599b5cbcc9aaa0faac0bc6 Author: Oriol Brufau <obrufau@igalia.com> Date: Fri Sep 28 10:42:05 2018 [css-grid] Properly align items next to collapsed tracks with gutters GridAreaPositionForInFlowChild could return a wrong end position for grid items adjacent to a collapsed track, because it didn't take into account that gutters collapse in that case. Therefore, "center" or "end" alignments displayed the item at the wrong position. BUG= 801881 TEST=external/wpt/css/css-grid/alignment/grid-gutters-013.html Change-Id: I8223f102e3fd581ab0a2d6f23d18c188e23807c7 Reviewed-on: https://chromium-review.googlesource.com/1245727 Reviewed-by: Javier Fernandez <jfernandez@igalia.com> Reviewed-by: Sergio Villar <svillar@igalia.com> Reviewed-by: Manuel Rego <rego@igalia.com> Commit-Queue: Javier Fernandez <jfernandez@igalia.com> Cr-Commit-Position: refs/heads/master@{#595045} [add] https://crrev.com/be21183bfc8dc2101a599b5cbcc9aaa0faac0bc6/third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-gutters-013.html [modify] https://crrev.com/be21183bfc8dc2101a599b5cbcc9aaa0faac0bc6/third_party/blink/renderer/core/layout/layout_grid.cc
,
Sep 28
|
||||||||
►
Sign in to add a comment |
||||||||
Comment 1 by krajshree@chromium.org
, Jan 14 2018