Slide 1

Slide 1 text

East Bay WordPress Meetup Presentation April 16, 2017

Slide 2

Slide 2 text

Getting to Grips with CSS Grid Sallie Goetsch

Slide 3

Slide 3 text

What Is CSS Grid? CSS Grid layout brings a two-dimensional layout tool to the web, with the ability to lay out items in rows and columns. CSS Grid can be used to achieve many different layouts. It excels at dividing a page into major regions, or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives. “

Slide 4

Slide 4 text

How is Grid different from Flexbox? Flexbox is designed to position items along one axis, either vertical or horizontal. Flex rows can wrap and simulate a grid, but Flexbox calculates item width separately on each row, so not all items in the flex container will be the same size. CSS Grid is designed to position items on two axes, vertical and horizontal. Not only can it create multiple rows and columns of aligned cells, you can use it to specify grid areas of multiple cells.

Slide 5

Slide 5 text

Grid Terminology • Grid Lines • Grid Tracks and Cells • Grid Areas

Slide 6

Slide 6 text

Grid Syntax (Eek!)

Slide 7

Slide 7 text

Best Way to Learn Grid Syntax

Slide 8

Slide 8 text

Automatic Responsive Grid With Grid, we can simply specify the minimum width of each grid item, then let the browser generate enough columns to fit the width of the container. .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(15ch, 1fr)); }

Slide 9

Slide 9 text

Automatic Grid, Visualized

Slide 10

Slide 10 text

Automatic Grid in Action on Home Page

Slide 11

Slide 11 text

The Bad News So far Grid only works in the newest browsers.

Slide 12

Slide 12 text

Create a Fallback with Feature Queries @supports (css-property: value) {} Note that older browsers don’t support feature queries. That’s why we’re using @supports instead of @supports not

Slide 13

Slide 13 text

Fall Back to Flexbox /* For browsers that don't support CSS Grid */ .home-row2 .tribe-list-widget { display: flex; justify-content: space-between; flex-wrap: wrap; } .home-row2 .tribe-list-widget li { flex: 1 1 240px; }

Slide 14

Slide 14 text

Feature Query for Grid /* For browsers that do support CSS Grid */ @supports (display: grid) { .home-row2 .tribe-list-widget { display: grid; grid-template-columns: repeat(auto-fill, 300px); grid-gap: 10px; } .home-row2 .tribe-list-widget li { flex: 0; } }

Slide 15

Slide 15 text

As Seen in MSIE (no Grid)

Slide 16

Slide 16 text

As Seen in Chrome (with Grid)

Slide 17

Slide 17 text

Grid Adjusts to Screen Automatically Tablet Phone

Slide 18

Slide 18 text

Resources Just some of my bookmarks in about CSS Grid. Links to articles posted on

Slide 19

Slide 19 text

About Your Presenter Sallie Goetsch (rhymes with ‘sketch’) built her first HTML website in 1994. Since discovering WordPress in 2005, she hasn’t looked back. Sallie became the organizer of the East Bay WordPress Meetup in Oakland, California, in 2009. She runs her WP Fangirl consulting and development business from her home in Oakley and appears regularly on the WP-Tonic Live panel—with her cats. Twitter @salliegoetsch Email [email protected] Phone (510) 969-9947