CSS GRID LAYOUT

Zach Winnie, Senior Interface Designer

Front-End Design Meetup / Tampa Bay UX Meetup
AUGUST 10, 2017
PRIVILEGED AND CONFIDENTIAL 1
 CSS GRID LAYOUT – FRONT-END DESIGN MEETUP / TAMPA BAY UX MEETUP

AGENDA
Intro
CSS Grid Layout — what is it?
CSS Grid browser support
The basics of using CSS Grid
CSS Grid & Flexbox together
CSS Grid for a basic layout
CSS Grid for an advanced layout
Moving to CSS Grid (approaches and troubleshooting)
Resources & more examples
Q&A time

PRIVILEGED AND CONFIDENTIAL 2

 CSS GRID LAYOUT – FRONT-END DESIGN MEETUP / TAMPA BAY UX MEETUP

WHO ARE YOU & WHY SHOULD I LISTEN TO YOU?

UX
 Research, strategy, sketches, wireframes, white boarding, paper prototyping, information
architecture, content planning, flow diagrams, usability, user testing, accessibility

UI
 Photoshop (Artboards & Generator), Adobe XD, Illustrator, InDesign, Acrobat, Sketch,
branding, print

Front End Design & Development

 HTML, CSS, JS, jQuery, Node, ReactJS, Gulp, Webpack, style guides, linting, SonarQube,
Selenium & functional testing, browser testing, WordPress/Sitefinity/other CMS’s, MVC
.NET, PHP, MySQL, SQL, Git

Agile & Scrum

Mentor to 3 other Interface teammates and many more developers

PRIVILEGED AND CONFIDENTIAL 3

 CSS GRID LAYOUT – FRONT-END DESIGN MEETUP / TAMPA BAY UX MEETUP

CSS GRID LAYOUT — WHAT IS IT?

CSS Grid Layout / CSS Grid / Grid
 Two-dimensional: Think rows and columns
 Sometimes three-dimensional by handling overlapping items (z-index)

vs. Flexbox
 One-dimensional: Think rows or columns (flex-direction)
 Focus on space distribution (grow, shrink, basis) and alignment (margin auto)

Not a __ killer (flexbox, float, absolute positioning, inline-block, table, etc.)

W3C Spec
 https://www.w3.org/TR/css-grid-1/

PRIVILEGED AND CONFIDENTIAL 4

 CSS GRID LAYOUT – FRONT-END DESIGN MEETUP / TAMPA BAY UX MEETUP

CSS GRID BROWSER SUPPORT

As of March 2017, the most modern browsers support it (65%+)
Desktop
 Chrome, Firefox, Edge 16+, Safari, Opera

Mobile
 Safari, Chrome, Android, Android Firefox

Missing
 IE11 (older, outdated version of spec)
 Edge 15 and older
 Opera Mini

Can I Use: CSS Grid / CSS Supports

CSS Grid Polyfill
PRIVILEGED AND CONFIDENTIAL 5
 CSS GRID LAYOUT – FRONT-END DESIGN MEETUP / TAMPA BAY UX MEETUP

CSS GRID BASICS

Parent (Grid Container)
 display: grid (also inline-grid or subgrid)
 Grid-template (grid-template-columns, grid-template-rows, grid-template-areas)
 Grid-gap (gutter)
 New unit: fr (fraction of free space; 1fr = 1 part of the available space)
 Some familiar properties: justify-items, justify-content, align-items, and align-content

Children (Grid Items)

 Grid-area
 Grid-column
 Grid-row
 Some familiar properties: order, justify-self, align-self

PRIVILEGED AND CONFIDENTIAL 6

 CSS GRID LAYOUT – FRONT-END DESIGN MEETUP / TAMPA BAY UX MEETUP

CSS GRID BASICS (CONTINUED)

Example #1
 https://codepen.io/mercuryworks/pen/gRjreP?editors=0010
 https://codepen.io/mercuryworks/pen/wexNjW?editors=0010 (Shorthand)
 https://codepen.io/mercuryworks/pen/BZPvxb?editors=0100 (Flexbox)

 Grid Gap: https://alligator.io/css/grid-gap/

PRIVILEGED AND CONFIDENTIAL 7

 CSS GRID LAYOUT – FRONT-END DESIGN MEETUP / TAMPA BAY UX MEETUP

CSS GRID & FLEXBOX TOGETHER

Example #2
 https://codepen.io/mercuryworks/pen/VWGyMM?editors=0100

 Repeat: https://alligator.io/css/css-grid-layout-repeat-notation/
 Minmax: https://alligator.io/css/css-grid-layout-minmax-function/

PRIVILEGED AND CONFIDENTIAL 8

 CSS GRID LAYOUT – FRONT-END DESIGN MEETUP / TAMPA BAY UX MEETUP

CSS GRID BASIC SKELETON LAYOUT

Example #3
 https://codepen.io/mercuryworks/pen/VWBqdx?editors=1000
 https://codepen.io/mercuryworks/pen/yXqwzR?editors=0100 (Nested grids)

PRIVILEGED AND CONFIDENTIAL 9

 CSS GRID LAYOUT – FRONT-END DESIGN MEETUP / TAMPA BAY UX MEETUP

CSS GRID ADVANCED SKELETON LAYOUT

Example #4
 https://codepen.io/mercuryworks/pen/owMOwG?editors=1000 (Flexbox only)
 https://codepen.io/mercuryworks/pen/MoBdPr?editors=0100 (Grid)
 https://codepen.io/mercuryworks/pen/wexLqP?editors=0100 (Fixed header)
 https://codepen.io/mercuryworks/pen/JJBQgK?editors=0100 (Related)

PRIVILEGED AND CONFIDENTIAL 10

 CSS GRID LAYOUT – FRONT-END DESIGN MEETUP / TAMPA BAY UX MEETUP

MOVING TO CSS GRID

Practical Applications
 Skeleton (header, main, sidebar, footer)
 Templates (lists)

Troubleshooting
 Whiteboard or sketch out your grid

Debugging
 https://hacks.mozilla.org/2017/06/new-css-grid-layout-panel-in-firefox-nightly/

Replacing An Existing Grid System

 Use @supports (http://caniuse.com/#feat=css-featurequeries)
 https://hacks.mozilla.org/2017/04/replace-bootstrap-layouts-with-css-grid/
 Do you really want to do this?

PRIVILEGED AND CONFIDENTIAL 11

 CSS GRID LAYOUT – FRONT-END DESIGN MEETUP / TAMPA BAY UX MEETUP

PARTING WORDS
Email: [email protected]
Twitter: @zachwinnie
More about Mercury: http://www.mercurynewmedia.com/
Join me at Mercury: http://www.mercurynewmedia.com/careers
 Senior Interface Designer
 Account Manager
 Senior .NET Application Developer
 DevOps Engineer

Mercury’s Twitter: @mercurynewmedia

Mercury’s Blog: http://www.mercurynewmedia.com/blog

PRIVILEGED AND CONFIDENTIAL 12

 CSS GRID LAYOUT – FRONT-END DESIGN MEETUP / TAMPA BAY UX MEETUP

REFERENCES & MORE EXAMPLES

CSS-Tricks: A Complete Guide To Grid
CSS-Tricks: Does CSS Grid Replace Flexbox?
CSS Tricks: CSS Grid SASS Mixins
CSS Tricks: Explicit and Implicit Grids
CSS Tricks: Interesting CSS Grid Facts
Codrops CSS Reference: Grid
Sitepoint: An Introduction to the CSS Grid Layout Module
Smashing Magazine: Building Production-Ready CSS Grid Layouts Today
A Book Apart: Get Ready For CSS Grid Layout
A List Apart: Practical CSS Grid: Adding Grid to an Existing Design
Mozilla Developer Network (MDN): CSS Grid Layout

PRIVILEGED AND CONFIDENTIAL 13

 CSS GRID LAYOUT – FRONT-END DESIGN MEETUP / TAMPA BAY UX MEETUP

REFERENCES & MORE EXAMPLES

Grid By Example
CSS Grid Polyfill
CSS Grid Cheat Sheet
Griddy.io
Grid Bugs
CSS Grid Polyfill
Should I try to use the IE implementation of CSS Grid Layout?

PRIVILEGED AND CONFIDENTIAL 14

 CSS GRID LAYOUT – FRONT-END DESIGN MEETUP / TAMPA BAY UX MEETUP

QUESTIONS?

PRIVILEGED AND CONFIDENTIAL 15