- From: Jonathan Blair via GitHub <sysbot+gh@w3.org>
- Date: Tue, 05 Apr 2022 02:16:32 +0000
- To: public-css-archive@w3.org
Tenkir has just created a new issue for https://github.com/w3c/csswg-drafts: == [css-grid] Unpredicable gap positioning with more than two tracks. == When defining a grid layout with multiple columns of fractional units, the alignment of the `grid-gap` property with relation to the overall grid does not align to the expected behavior of the specification. Take for example, a grid layout of ```css grid-template-cols: 50fr 50fr; grid-gap: 10px; ``` This layout will split each column evenly, resulting in a 5px gap on the left most column, and a 5px gap on the right most column. <img width="644" alt="Screen Shot 2022-04-04 at 10 14 13 PM" src="https://user-images.githubusercontent.com/3649828/161665740-d1a4ca4d-b7e8-418c-8654-4a4260780736.png"> ---- However, expand this with a third column as such: ```css grid0-template-cols: 50fr 25fr 25fr; grid-gap: 10px; ``` This layout will split the two `25fr` columns evenly, as expected. However, the gap between the `50fr` column, and the `25fr` column will not be even. Rather, the entirety of the gap will be on the `50fr` side of the split. <img width="646" alt="Screen Shot 2022-04-04 at 10 13 35 PM" src="https://user-images.githubusercontent.com/3649828/161665680-6fca47a4-d9b8-425e-be60-ff5e8b6c79de.png"> ---- This is a significant issues with more complex layouts, as the gap between children becomes unpredictable, and alignment of any meta-elements becomes impossible.  Spec: https://www.w3.org/TR/css-grid-1/ Minimum Reproduction: https://codesandbox.io/s/wild-leftpad-h2f782?file=/index.html Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7197 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 5 April 2022 02:16:33 UTC