CSS Grid 101
DSM Front-End Meetup
January 4, 2017
6pm @ Businessolver
Shawn
Reisner
"CSS Grid Layout (aka "Grid"), is a two-dimensional grid-based layout system that aims to do nothing less than completely change the way we design grid-based user interfaces."
Getting Started
Terminology
Syntax
Further Learning
The Itinerary
Getting Started
caniuse.com/#feat=css-grid
Browser Compatibility
How to Enable CSS Grid
Chrome/Opera
Enable
enable-experimental-web-platform-features
flag
Firefox
Enable
layout.css.grid.enabled
flag
IE 10+
Out of date implementation, do not use
Terminology
Grid Line
Grid Cell
Grid Track
Grid Area
Grid Gutters
Syntax
Further Learning
Recommendation
Other Resources
https://css-tricks.com/snippets/css/complete-guide-grid/
http://gridbyexample.com/
http://codepen.io/jensimmons/pen/grjQwB?editors=1100
https://www.w3.org/TR/css-grid-1/
Follow Me!
@ReisnerShawn
@sreisner
Made with Slides.com