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

[csswg-drafts] [css-grid-1] Clarify the reason of limit the rows/cols at grid, and increase it

From: Robert Utasi via GitHub <sysbot+gh@w3.org>
Date: Mon, 06 Feb 2017 16:53:01 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-205644507-1486399980-sysbot+gh@w3.org>
hunboy has just created a new issue for 
https://github.com/w3c/csswg-drafts:

== [css-grid-1] Clarify the reason of limit the rows/cols at grid, and
 increase it ==
referred spec: https://drafts.csswg.org/css-grid/#overlarge-grids

reference issues with testcases:
 - https://bugzilla.mozilla.org/show_bug.cgi?id=1336679
 - https://bugs.chromium.org/p/chromium/issues/detail?id=688640
 - https://github.com/w3c/csswg-drafts/issues/945

I file this issue for **css-grid-1** whilst it is almost ready.

The situation shortly: with grid we can make masonry/pinterest style 
layout simply and elegantly by 1px steps.

During my user-support on several channels for front-end developers 
there is no day when I don't meet this question, "how to make 
masonry?"

The current scripts for it are brutally hardcoded, mostly use absolute
 positioning and recalculating everything during window-resize 
including the relative parent's height which is hardcoded and 
recalculated also.

Now with grid it is possible with only 1 hardcoded value - which is 
the image height - and setting up **grid-row-end: span ...px;**. After
 this, it is a constant and doesn't change anymore mormally. Now we 
can set up with mediaqueries **grid-template-columns: 
repeat(colnumber, 300px);** and it reflows easily to a different 
columns without hardcoded recalculations during resize the window. 
This is a really pretty and elegant way for masonry with a minimum 
javascript, which one runs only once.

**The current issue is:** UAs have limit for the maximum rows as very 
overlimited. (At this report day, the chromium limit is 999 and 
mozilla limit is 9999 for the whole grid.) Normally there is no reason
 for limiting except the row-spanning should cause some type of 
stacking problems.

My suggestion is:
 - use limit for row-span (if it is necessary) I say **9999** instead 
of the whole grid and keep the grid flowing as "unlimited".
 - add 1 new value for **grid-row-end: span available;** for those 
layouts, where someone wants 1 column crossflowing on the whole grid 
without limit.

For more details, please visit the referred issues above for 
testcases, discussions, etc.
I think, limiting the spans is the better way than limiting the whole 
grid.



Please view or discuss this issue at 
https://github.com/w3c/csswg-drafts/issues/1009 using your GitHub 
account
Received on Monday, 6 February 2017 16:53:09 UTC

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