W3C home > Mailing lists > Public > public-css-archive@w3.org > March 2017

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

From: Robert Utasi via GitHub <sysbot+gh@w3.org>
Date: Mon, 20 Mar 2017 23:25:35 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-215585285-1490052334-sysbot+gh@w3.org>
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

This archive was generated by hypermail 2.4.0 : Tuesday, 19 October 2021 01:30:30 UTC