A new CSS Grid demo on mozilla.org
With CSS Grid shipping across browsers this spring (already in Firefox 52 and Chrome 57; Safari, and hopefully Edge, soon to follow) the team here at Mozilla wanted to show off some of the key features and also let our internal designers and developers experiment with the technology on mozilla.org. The result is a live demo site that shows Grid features and provides links to our favorite resources. The bonus is the mozilla.org web developers got hands-on, real world experience using Grid by working up a site from scratch.
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 Andrews 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 (added 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 as an added bonus, the front end developer who built the demo site will be writing a post soon to with details on what they learned during their first experience using CSS Grid…
