A new CSS Grid demo on mozilla.org

With CSS Grid shipping across browsers this spring (already in Firefox 52, Chrome 57, and Safari 10.1. UPDATED: Safari 10.1 shipped in March with the release of iOS 10.3 and macOS Sierra 10.12.4) the team here at Mozilla wanted to show off some of the key features and also let our in-house designers and developers experiment with the technology on mozilla.org. The result is a live demo site that shows CSS Grid features and provides links to our favorite resources. The bonus is the mozilla.org web developers got hands-on, real world experience by working up a site from scratch with Grid.

Screen capture of CSS Grid demo

It turned out that the resources available on the web, including tons of examples and instruction, do such a great job of clearly explaining the basics that they were able to dive in and build the site without any handholding. Jen Simmons and  Rachel Andrew both provide excellent examples and tutorials on how to start working with grids. In addition, MDN contains several detailed guides on using CSS Grids.

When designing this project we had the following goals in mind:

  • Demonstrate the potential of CSS Grid to developers and designers.
  • Introduce Firefox Developer Tools Grid Inspector, which is currently the only in-browser developer tool for Grid.
  • Build a page on mozilla.org that uses Grid Layout.
  • Prove CSS Grid makes it easy for anyone who knows CSS to grasp the fundamentals and create a functional page. (Bonus: the Mozilla webdev team had fun doing it!)

Grid provides powerful layout capabilities, and on the demo site we wanted to illustrate some of the key features. This list is not exhaustive, but does show some really interesting capabilities that are now available.

  • Fixed or Flexible Grids: You can create a grid either with fixed track sizes or with flexible sizes using percentages or the new fr fractional unit.
  • Place & Align Items: You can place items at precise locations on the grid using standard grid properties or by using grid template areas. Items can be placed independent of their HTML source order. Alignment features control how items align when placed into a grid area, and also how the whole grid is aligned.
  • Control Overlap: Grid cells can contain more than one item, and can span multiple rows and columns. You can also control layering with z-index.

Additionally, we wanted to show off Firefox’s Grid Inspector Tool, which lets you see the grid lines in the browser while you’re creating a layout or studying other examples of CSS Grid in action.

Please check out the demo site and let us know what you think. We hope it will help you to learn and inspire you to start using CSS Grid. And stay tuned for more coverage of CSS Grid and how to use it, here and on MDN.

 

About Ali Spivak

@alispivak. Ali is the head of Developer Marketing at Mozilla, and has been developing and managing web sites for longer than she cares to admit. She's passionate about keeping the web open and working on things developers love (like MDN).

More articles by Ali Spivak…


12 comments

  1. Ralf

    Sounds fantastic. How long before all major browsers support this? How about BC?

    March 22nd, 2017 at 23:09

    1. Ali Spivak

      Grids are supported by default in the most recent releases of both Firefox and Chrome, and Apple has stated that CSS Grid will be in Safari 10.1.

      caniuse is a good reference to track browser support for CSS Grid.

      March 23rd, 2017 at 13:35

  2. Jos Sparreboom

    Your new CSS Grid didn’t work on Chrome Version 56.0.2924.76 (64-bit) plus Xubuntu v 1704. And not in midori 0.5.11. not in Ubuntu browser. Sorry!

    March 23rd, 2017 at 08:30

    1. Ali Spivak

      If you update to Chrome 57, which was released a few weeks ago, CSS Grid is enabled by default. Grid is not yet on by default in Xubuntu, midori, or Ubuntu browser.

      March 23rd, 2017 at 13:30

  3. Johaven Kaindoa

    very good I LIKE IT.

    March 24th, 2017 at 06:30

  4. voracity

    I came across what I consider a reasonably serious bug in both flex (where I encountered it originally) and grid layouts when making use of replaced elements (e.g. images). I’ve reported the bug (1344525) a few weeks ago, but nobody’s looked at it yet.

    The basic issue is that a replaced element that get’s resized is layed out based on its natural *width* in column layouts. Note that layout based on height in row layouts is correct — i.e. if you rotate the whole layout (switch from columns to row, and rotate the image), then it works beautifully.

    Please see bug for screenshots.

    The reason I consider this a serious (semi-urgent) bug is because a) column layout behaves differently to row layout and b) the expected behaviour *cannot* be achieved without JavaScript (the broken behaviour can be achieved in the opposite case — though why anyone would want that behaviour is beyond me :) ). Having waited 20 years for decent layout, I really don’t want to risk that this broken behaviour becomes another pain for the next 20 years…

    March 25th, 2017 at 20:37

  5. David

    In Example 3 of the Place & Align section of the demo, the code displayed for items [1, 2, 3, 4] sets their align-self properties to [end, start, end, start], respectively, when it should be (based on what’s actually used for the display) [start, end, start, end].

    March 26th, 2017 at 14:02

    1. Craig Cook

      Sorry about that! The error was reported in https://bugzilla.mozilla.org/show_bug.cgi?id=1349284 and we’ve made the fix, which should be pushed to production shortly (or already has been, depending on when you’re reading this).

      March 27th, 2017 at 13:09

  6. Mason

    It looks like grid support is starting to show up on Safari! You can see it working properly, while being told it isn’t working properly :^}

    http://imgur.com/a/SsR15

    March 30th, 2017 at 12:42

    1. Ali Spivak

      You are correct, CSS Grid support shipped in Safari 10.1.

      April 7th, 2017 at 12:55

  7. ffgfgf

    of cource CSS Grid support its impotant for all developer

    April 19th, 2017 at 23:51

  8. george

    This CSS grid is WOW!!!

    April 20th, 2017 at 08:05

Comments are closed for this article.