grid-web-summit

CSS Grid: Bringing true two-dimensional layout to the web

Recording and slides, Sep 2017 at the Microsoft Edge Web Summit (Seattle, WA)

Code Demos

• Basic example with explicit placement
• Grid areas
• Implicit placement and auto-fit/fill 1 2 3
• Explicit and auto tracks
• Fit-content
• Mix it all together

(FYI the image sizes in these demos are giant and will be resized later)

Examples

• labs.jensimmons.com
• Responsive Periodic Table of Elements by Dudley Storey
• Malerei, Fotografie, Film (pg. 126) by Chen Hui Jing
• Kaleidoscope by liamj

Resources

• CSS Grid specification
• Browser support
• Grid by Example
• Original prefixed Grid syntax
• Accurately checking for CSS Grid support in Microsoft Edge
• CSS Grid Garden game

Credits

Thanks to the following folks for the Creative Commons photography (other images in their feeds may potentially contain NSFW images): Alexandr Ivanov, Vladislav, Stefan Stefancik, Alexander Drummer, LaBruixa, Marcin Milewski, shadow-Wolf, Negative Space, Lisa Fotios, David McBee , User 12019