[csswg-drafts] [css-grid-1][css-grid-2] Basic support for "equal gutter" with justify-content on grid items

hunboy has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-grid-1][css-grid-2] Basic support for "equal gutter" with justify-content on grid items ==
[css-grid-1][css-grid-2]
https://drafts.csswg.org/css-grid/#gutters

**Motivation**: the users often want equal (horizontally, vertically) gaps for stilistic reasons.

Currently the grid-row-gap doesn't support the equal value when justify-content is defined.

As a workaround I present 3 javascript algorythms to make equal gutter between the grid items when justify-content is defined.

 - **space-evenly**: https://jsfiddle.net/utasir/20yy425r/13/
 - **space-around**: https://jsfiddle.net/utasir/20yy425r/14/
 - **space-between**: https://jsfiddle.net/utasir/20yy425r/15/

(for testing resize the frame - the 100 value in the script is same as the grid-item's width, so it's hardcoded by constant)

**Resolution**: So some basic support would be good for gaps. Perhaps "grid-row-gap: auto", or some keyword to define equal gutter for the grid system.



Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1116 using your GitHub account

Received on Monday, 20 March 2017 23:25:42 UTC