As a security precaution, we have turned on the setting "Require API key authentication for API requests" for everyone. If this has broken something, please contact
Last Comment Bug 616605 - (css-grid) CSS Grid Layout
: CSS Grid Layout
Status: NEW
: css3, DevAdvocacy
Product: Core
Classification: Components
Component: CSS Parsing and Computation (show other bugs)
: Trunk
: All All
: -- normal with 113 votes (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
: Jet Villegas (:jet)
: 466974 (view as bug list)
Depends on: 981300 1136908 1194446 1201932 1201941 1240834 1266265 1269642 1277934 1278058 1300366 1302839 1306705 1312403 1315750 1316884 1317206 1317524 1317578 1317840 1317845 1317870 1319688 1321655 1330866 975501 976787 978212 978478 981752 981754 983175 984760 989755 994592 1000376 1000431 1000592 1002607 1004197 1005567 1008969 1009214 1009272 1009282 1009776 1034361 1056864 1107778 1107783 1107786 1117538 1118820 1139539 1144096 1145968 1146051 1147423 1151201 1151204 1151212 1151213 1151214 1151243 1151316 1153140 1163432 1163435 1163565 1172327 1174569 1174574 1176775 1176782 1176790 1176792 1176793 1185140 1194888 1194892 1209485 1211260 1217086 1226697 1227285 1229165 1230665 1238890 1251999 1255393 1258443 1264067 1264607 1266268 1272783 1278455 1279182 1279641 1281320 1281446 1282418 1282643 1299133 1304636 1305244 1309407 1309839 1312379 1313068 1315857 1316051 1317168 1319958 1330380
Blocks: 709467 css3test 914360
  Show dependency treegraph
Reported: 2010-12-03 13:58 PST by adminnu
Modified: 2017-01-12 21:24 PST (History)
96 users (show)
See Also:
Crash Signature:
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---

A basic testcase (590 bytes, text/html)
2014-04-28 08:44 PDT, Mats Palmgren (:mats)
no flags Details
Not much, but it's something :-) (9.07 KB, image/png)
2014-04-28 08:48 PDT, Mats Palmgren (:mats)
no flags Details

Description User image adminnu 2010-12-03 13:58:21 PST
User-Agent:       Mozilla/5.0 (Windows NT 6.1; rv:2.0b8pre) Gecko/20101202 Firefox/4.0b8pre
Build Identifier: Mozilla/5.0 (Windows NT 6.1; rv:2.0b8pre) Gecko/20101202 Firefox/4.0b8pre

I would like to propose the inclusion of plans to develop a draft standard for firefox CSS Grid Alignment Level 3.

Reproducible: Always
Comment 1 User image Matt Cooper 2011-04-13 18:02:32 PDT
Please also ensure that absolute-positioned children are supported inside of grid "cells".

I've noticed that IE 10 supports this in both "grid alignment" layouts as well as in "flexbox" layouts.

I bring this up because Mozilla does not support absolute-positioned children inside of flexbox boxes as seen in Mozilla bug 649701.
Comment 2 User image Matt Cooper 2011-04-13 18:10:52 PDT
Support was added in IE10 and this is the demo page they use to showcase it:

(obviously the "-ms" prefixes would need to be changed to "-moz" etc.)
Comment 3 User image Matt Cooper 2011-05-09 16:53:04 PDT
It has graduated from the server as "Grid Layout":
Comment 4 User image Jacob Floyd 2011-05-09 21:45:12 PDT
I suspect that css3-grid-layout will supersede/replace css3-layout (see bug 466974). I think implementing css3-grid-layout (this bug) is a better option. The sooner this is implemented the better.
Comment 5 User image Anthony Ricaud (:rik) 2011-05-24 04:49:39 PDT
Renaming the bug to reflect the new spec name.

In addition to IE10, there is work happening in WebKit :

I'm not strongly asking for this particular module but it is clear to me that one layout system needs to be implemented.
Comment 6 User image naught 2011-05-25 01:08:44 PDT
*** Bug 466974 has been marked as a duplicate of this bug. ***
Comment 7 User image Paul Rouget [:paul] 2011-12-02 04:26:50 PST
Any update here? Is that something we want to have?
Comment 8 User image Jon Rimmer 2011-12-02 05:55:14 PST
FWIW, Hyatt's Webkit implementation never progressed, but Julien Chaffraix and others at Google have recently picked this up and are actively developing it:
Comment 9 User image David Baron :dbaron: ⌚️UTC-8 2011-12-02 12:00:31 PST
(In reply to Paul Rouget [:paul] from comment #7)
> Any update here? Is that something we want to have?

It is something I want to have, but nobody's working on it (yet).
Comment 10 User image Daniel Holbert [:dholbert] 2012-02-21 16:29:41 PST
Note: The CSS3 Grid spec uses "display: grid".  However, in current Gecko releases, the style "display: -moz-grid" triggers _XUL_ grid layout (not CSS3 grid layout, which of course isn't implemented yet, since this bug is still open).

When we fix this bug & add support for CSS3 grid, we'll need to either...
 (a) commandeer the existing keyword ("display: -moz-grid") and potentially break existing content that expects the XUL grid model
 (b) use a different display value ("display: -moz-css3-grid" or something)
 (c) ship it unprefixed ("display: grid")

Not sure about the cost-benefits -- just wanted to get that out there (and clarify this for people who might already be using -moz-grid and expecting CSS3 grid behavior).
Comment 11 User image Loic 2012-03-28 16:42:08 PDT
W3C has published a new update about the draft of CSS Grid Layout:
Comment 12 User image Daniel Holbert [:dholbert] 2012-03-28 17:10:22 PDT
Yup, thanks!  This bug's URL field actually points to an even more up-to-date (and volatile) version than that (the editor's draft)
 --> /me updates URL to point to where the old URL redirects.(s/grid-align/grid-layout/)
Comment 15 User image Florian Bender 2013-09-09 14:04:27 PDT
(In reply to Daniel Holbert [:dholbert] from comment #10)
> When we fix this bug & add support for CSS3 grid, we'll need to either...
>  (a) commandeer the existing keyword ("display: -moz-grid") and potentially
> break existing content that expects the XUL grid model
>  (b) use a different display value ("display: -moz-css3-grid" or something)
>  (c) ship it unprefixed ("display: grid")

So I think the current approach is (option c) to implement everything unprefixed but behind a pref (`display: grid;` needs Bug 872301 to be fixed then, I think). That means it won't interfere with XUL Grid. 

However, I think it's worth assessing the option of disabling XUL Grid for web content to not confuse web devs. Is there actually any use of XUL Grid in Web content? I though XUL for Web content was disabled at some point, anyway?
Comment 16 User image Loic 2013-09-15 06:40:03 PDT
New working draft: CSS Grid Layout Module Level 1
Comment 17 User image Daniel Holbert [:dholbert] 2014-02-06 15:35:52 PST
[Removing "level 3" from bug title, as the spec is now titled "CSS Grid Layout Module Level 1"]
[It's still part of "css3", so that keyword still applies; but each module levels independently now, starting at level 1, except for modules that were covered in css2.1]
Comment 18 User image Mats Palmgren (:mats) 2014-04-28 08:44:59 PDT
Created attachment 8413787 [details]
A basic testcase
Comment 19 User image Mats Palmgren (:mats) 2014-04-28 08:48:19 PDT
Created attachment 8413788 [details]
Not much, but it's something :-)
Comment 20 User image Patrick Brosset <:pbro> 2015-07-07 10:45:59 PDT
Just filed bug 1181227 to have some kind of css grid layout inspector over in devtools.
I don't think this has been discussed in the intent to implement thread, but having a way for users to just see the grid, and areas would probably help them a lot debug problems, and therefore help with adoption.
I suspect just drawing the lines will require a new chrome-only API to be created.

Also, what's the state of the implementation of the spec? It seems that many of the blocking bugs have been fixed already, so I'm wondering if one can already experiment with this.
Comment 21 User image Steve Lee 2016-08-08 05:04:13 PDT
Could some provide an update on status and intention? Thanks

Note You need to log in before you can comment on or make changes to this bug.