Mozilla Hacks

CSS Grid and Grid Highlighter Now in Firefox Developer Edition

Avatar photo By Helen V. Holmes

Posted on December 1, 2016 in CSS, Developer Tools, and Featured Article

CSS Grid has just been uplifted to Firefox 52 Developer Edition (download it here!). With Chrome (and hopefully Safari and Edge) implementations coming shortly, using grid to build websites will soon be possible in release browsers across the board.

Grid allows users to decouple HTML from layout concerns, expressing those concerns exclusively in CSS. It adapts to media queries and different contexts, making it a viable alternative to frameworks such as Twitter’s Bootstrap or Skeleton which rely on precise and tightly coupled class structure to define a content grid.

Reducing the risks of fragility, code bloat, and high maintenance costs inherent in how we currently build on the web, grid really does have the potential to change the way we do layouts. Jen Simmons calls it Real Art Direction for the Web and Rachel Andrew has built Grid by Example to inform, share, and evangelize it. If you’re new to grid, be sure to have a look.

As you can see in the video, the grid highlighter tool will help get you started illustrating the grid in-page as you’re working. Additional tooling is planned for the near future to continually improve working with grid.

To access this tool, make sure you’re running an up-to-date version of DevEdition. Next, open a page that is known to have grid code—we recommend one of these demos for this. Open the Inspector via Developer → Inspector. Select an element with the property display: grid;. To toggle grid lines, click the icon next to “grid” which will persist the lines permanently.

The Firefox Developer Tools team have planned a series of improvements to make working with grid easier in the future. You can follow our progress through these bugs:

The metabug for tracking this work is bug 1181227.

About Helen V. Holmes

More articles by Helen V. Holmes…

10 comments

  1. Vincent

    The Invision link (to the design of the new panel) is behind a login :(

    December 1st, 2016 at 10:32

    1. Helen V. Holmes

      Thanks for pointing this out! This link should work: https://invis.io/3X87NEBYH#/179720294_Grid

      December 6th, 2016 at 03:43

  2. Kyle McVay

    I really like the looks of the new program hope that many more will also.

    December 2nd, 2016 at 16:45

  3. isaac weathers

    Pretty slick. It’s nice seeing some options for a grid that don’t involve bringing down the farm that is a fully baked framework like BootStrap or Foundation that one then has to go and hack apart just to get a slimmed down grid and a few base classes. I can see Chrome bringing this in soon but sadly IE ~ Edge will always be that browser that stops the party and forces polyfil and workaround hell that is ubiquitous with web development for that browser. So do you see this as a replacement for FlexBox or an alternative?

    December 2nd, 2016 at 18:38

    1. Helen V. Holmes

      Hey Issac,

      I think we’re going to see this more as an alternative to frameworks such as Bootstrap or Skeleton.css than a replacement for Flexbox. I think there’s lots of code that people are currently using Flexbox for that Grid might be a better fit for—Flexbox is great for laying elements out along a row or a column (such as UI buttons) while Grid is great for multidimensional layouts (where you need columns AND rows). It’s still a really new technology and so it’s hard to say how people will end up using all of their choices, though—I’m excited to see what people end up building!

      December 6th, 2016 at 03:41

  4. Changhyun Cho

    Awesome! It will only friefox?

    December 2nd, 2016 at 21:26

    1. Helen V. Holmes

      The tooling will only be in Firefox, but Grid is coming to both Firefox and Chrome and expected to land in March for both browsers.

      December 6th, 2016 at 03:41

  5. Matt Enright

    lol well from html1.x to this; Mr. Brynes-Lee little hack on Standard General has come a long way. I am very interested to see were this will take us. It’s a little more than grabbing a fender ride on to a SpaceX Rocket into low orbit. This could grab some smarty a free ride to the Red Plant or a free ride to the rocky belt between Mars and the big plant of Jupiter and a lot of other wonderful great work to come from human minds and who knows maybe even a Banana’s minds :P. Okay well maybe I am getting a little over ripe there but it’s fun to wonder – new great tools and toys only take us further. And this tool since it’s beginning has only made us better; despite the few like ISIS and NSA who have tried to use it for evil. Maybe it’s time that we who understand the truer form of the WWW and Net should make a loose form of Knights as it were that will stand a the Angles standing loosely as the simply night watch men watching over that which is freedom and open to the meeting of minds so that we can all grow and learn who each and everyone of are as a person on this wonderful blue world can learn how beautiful each of us are just in they own way and how great the food and the laughter we can share be can.

    Thank you Helen may the heavens Bless You!!!

    Matthew.

    December 4th, 2016 at 13:32

  6. Richard Wale Aderounmu

    CSS Grid great hack and improvement to frontline coding for non-coders and makes the work a breeze for people like us. It’s a huge leap for visual composition. Thumbs Up guys. Kudos Hellen.

    December 5th, 2016 at 21:13

  7. Tiago Celestino

    This is amazing.

    December 10th, 2016 at 15:08

Comments are closed for this article.