Web designer / front-end...

#msedgesummit

Melanie RichardsWeb designer / front-end developer

@somelaniesaid

melanierichards

#msedgesummit

CSS Grid: bringing true two-

dimensional layout to the web

#msedgesummit

#msedgesummit

Photo by fsHH on Pixabay

FLOATS

DISPLAY: INLINE-BLOCK

#msedgesummit

Photo by Mabuya on Pixabay

MULTI-COLUMN

#msedgesummit

Photo by JacLou on Pixabay

POSITION:

ABSOLUTE

#msedgesummit

Photo by Teerasuwat Jiratarawat

#msedgesummit

WHERE THERE’S A WILL, THERE’S A WAY

TO WRITE SOME HACKY CODE.

#msedgesummit

ENTER FLEXBOX

#msedgesummit

Good stretching doggo

By Kapa65 on Pixabay

MAIN AXIS

#msedgesummit



#msedgesummit

CROSS AXIS



#msedgesummit



#msedgesummitPhoto by ktphotography on Pixabay

CSS Grid

#msedgesummit

HOW GRID WORKS

#msedgesummit

#msedgesummit

“TOP DOWN” LAYOUT

display: grid

display: inline-grid

#msedgesummit

1. INITIALIZE GRID FORMATTING-CONTEXT

#msedgesummit

2. DEFINE GRID VIA PARENT’S PROPERTIES

grid-template-rows

grid-template-columns

grid-areas

grid-auto-rows

grid-auto-columns

grid-auto-flow

grid

#msedgesummit


“Tracks”:

rows and columns

#msedgesummit


2 grid lines per track:

-start and -end

#msedgesummit


grid-template-areas

#msedgesummit

3. PLACE AND ALIGN GRID ITEMS IN “SLOTS”

grid-row

grid-column

grid-area

grid-row-start, -end

grid-column-start, -end

#msedgesummit

3. PLACE AND ALIGN GRID ITEMS IN “SLOTS”

justify-self

align-self

#msedgesummit

JUSTIFY VS. ALIGN PROPERTIES

horizontal writing mode

(e.g. English)JUSTIFY

ALIGN

#msedgesummit

JUSTIFY VS. ALIGN PROPERTIES

vertical writing mode

(e.g. Japanese)ALIGN

JUSTIFY

#msedgesummit

4. SIZE AND DISTRIBUTE THE GRID!

grid-row-gap

grid-column-gap

grid-gap

#msedgesummit

4. SIZE AND DISTRIBUTE THE GRID!

justify-items

align-items

justify-content

align-content

BASIC EXAMPLE WITH

EXPLICIT PLACEMENT

#msedgesummit

#msedgesummit

Ut metus augue, interdum quis varius ut, commodo sit amet purus. Quisque dignissim sem ac

pharetra facilisis. Cras ut efficitur nibh. Praesent eget elementum nibh. Vestibulum elementum,

massa sed euismod vestibulum, dui purus eleifend orci, vitae accumsan erat turpis a nulla. In hac

habitasse platea dictumst. Quisque lorem diam, congue vitae lobortis at, vulputate sed urna.

Fusce id ex commodo, imperdiet est a, tempor orci. Duis rutrum et nisi nec sodales.

Donec maximus sit amet velit consectetur suscipit. Nunc ornare urna lobortis dolor cursus

facilisis. Phasellus congue efficitur volutpat. Quisque ultrices risus velit, vitae cursus enim rutrum

non. Nunc ornare eleifend lectus, vitae pulvinar augue lacinia at. Fusce arcu dolor, vulputate id

molestie ut, dignissim sit amet erat. Interdum et malesuada fames ac ante ipsum primis in

faucibus. Etiam scelerisque convallis enim, nec pellentesque ante egestas vitae. Curabitur urna

justo, iaculis ac imperdiet vel, posuere quis orci. Quisque finibus imperdiet sem finibus pharetra.

Aenean tempor dignissim nisi ut interdum. Fusce molestie leo sed enim mollis tempus. Phasellus

aliquet ligula leo, eu viverra augue vulputate sed.

Maecenas maximus ante non arcu rhoncus ultricies. In ornare commodo urna, vitae tempor

magna consequat eu. Etiam dolor risus, scelerisque a risus id, viverra luctus tortor. Aliquam

suscipit tempus blandit. Vestibulum luctus tortor at molestie condimentum. Donec eu justo sed

justo volutpat interdum sit amet a elit. Praesent fermentum, nibh eu rhoncus semper, eros nibh

imperdiet lorem, sed interdum sem orci a mi.

Bork!

Lorem ipsum dolor sit amet,

consectetur adipiscing elit.

Suspendisse sit amet neque

mattis, bibendum ligula et,

dignissim tortor. Aenean auctor

sodales ex, vitae suscipit mauris

ullamcorper nec. Vivamus

commodo elit ac ante mattis, ac

lobortis lacus interdum. Sed

condimentum, nisl in posuere

aliquam, lacus nisi

condimentum tortor, quis

convallis lacus libero elementum

tortor. Cras vitae nulla semper,

elementum mauris id, semper

lectus. Maecenas consequat felis

et suscipit sollicitudin. Ut

accumsan sit amet mauris at

aliquet. Mauris iaculis magna

quis lectus rhoncus, vel convallis

elit tristique. Pellentesque

blandit quam a tincidunt ornare.

Aenean fermentum, sem non

placerat viverra, velit ligula

iaculis turpis, sit amet rhoncus

nisi diam ac diam.

Nam id velit ac lectus maximus

dictum sagittis vitae sem.

Vivamus feugiat rutrum nibh

ultrices pharetra. Sed commodo

finibus eros quis ornare. Nulla

cursus suscipit neque, in suscipit

ipsum varius ut. Cras

consectetur turpis eget feugiat

ornare. Maecenas ac lorem

pulvinar, varius nunc non,

sagittis nibh. Vestibulum quis

dignissim sapien, sed commodo.

They’re

good

dogs.

1. Chasing squirrels

2. Horking down food

3. Chewing on things

4. Asserting authority

5. Cuddles

6. Intellectual discourse

Things dogs like:











aliquam, lacus nisi

condimentum tortor, quis

convallis lacus libero elementum

tortor. Cras vitae nulla semper,

elementum mauris id, semper

lectus. Maecenas consequat felis

et suscipit.





5. Cuddles


Things dogs like:

#msedgesummit

<main class=“parent”>

<section class=“child-1”></section>





</main>Ut metus augue, interdum quis varius ut, commodo sit amet purus. Quisque dignissim sem ac

pharetra facilisis. Cras ut efficitur nibh. Praesent eget elementum nibh. Vestibulum elementum, massa

sed euismod vestibulum, dui purus eleifend orci, vitae accumsan erat turpis a nulla. In hac habitasse

platea dictumst. Quisque lorem diam, congue vitae lobortis at, vulputate sed urna. Fusce id ex

commodo, imperdiet est a, tempor orci. Duis rutrum et nisi nec sodales.

Donec maximus sit amet velit consectetur suscipit. Nunc ornare urna lobortis dolor cursus facilisis.

Phasellus congue efficitur volutpat. Quisque ultrices risus velit, vitae cursus enim rutrum non. Nunc

ornare eleifend lectus, vitae pulvinar augue lacinia at. Fusce arcu dolor, vulputate id molestie ut,

dignissim sit amet erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam

scelerisque convallis enim, nec pellentesque ante egestas vitae. Curabitur urna justo, iaculis ac

imperdiet vel, posuere quis orci. Quisque finibus imperdiet sem finibus pharetra. Aenean tempor

dignissim nisi ut interdum. Fusce molestie leo sed enim mollis tempus. Phasellus aliquet ligula leo, eu

viverra augue vulputate sed.

Maecenas maximus ante non arcu rhoncus ultricies. In ornare commodo urna, vitae tempor magna

consequat eu. Etiam dolor risus, scelerisque a risus id, viverra luctus tortor. Aliquam suscipit tempus

blandit. Vestibulum luctus tortor at molestie condimentum. Donec eu justo sed justo volutpat

interdum sit amet a elit. Praesent fermentum, nibh eu rhoncus semper, eros nibh imperdiet lorem, sed

interdum sem orci a mi.

Bork!











aliquam, lacus nisi condimentum

tortor, quis convallis lacus libero

elementum tortor. Cras vitae

nulla semper, elementum mauris

id, semper lectus. Maecenas

consequat felis et suscipit

sollicitudin. Ut accumsan sit

amet mauris at aliquet. Mauris

iaculis magna quis lectus

rhoncus, vel convallis elit

tristique. Pellentesque blandit

quam a tincidunt ornare. Aenean

fermentum, sem non placerat

viverra, velit ligula iaculis turpis,

sit amet rhoncus nisi diam ac

diam.







ipsum varius ut. Cras consectetur

turpis eget feugiat ornare.

Maecenas ac lorem pulvinar,

varius nunc non, sagittis nibh.

Vestibulum quis dignissim

sapien, sed commodo.

They’re

good

dogs.
















consequat felis et suscipit. Lorem

ipsum dolor sit amet,

#msedgesummit

.parent {

display: grid;

}

#msedgesummit

.parent {

display: grid;

grid-template-columns:

22em 1fr 22em;

}

1fr 22em22em

#msedgesummit

2fr 1fr

.parent {

display: grid;


22em 2fr 1fr 22em;

}

#msedgesummit

.parent {

display: grid;

grid-template-rows:

1fr 1fr 1fr;


22em 2fr 1fr 22em;

}

1fr

1fr

1fr

.parent {

display: grid;

grid-template-rows:

repeat(3, 1fr);


22em 2fr 1fr 22em;

}

#msedgesummit

1fr

1fr

1fr

#msedgesummit

.parent {

display: grid;

grid-template-rows:

1fr 1fr 1fr;


22em 2fr 1fr 22em;

grid-gap: 1.5em;

}

#msedgesummit

.parent {

display: grid;

grid-template-rows:

1fr 1fr 1fr;


22em 2fr 1fr 22em;

grid-gap: 3em 1.5em;

}

#msedgesummit

#msedgesummit

Bork!


























diam.













.child-1 {

grid-row: 1 / span 3;

grid-column: 1;

}

#msedgesummit

.child-2 {

grid-row: 1 / span 3;

grid-column: 2;

}

Bork!


























diam.































#msedgesummit

They’re

good

dogs.

.child-3 {

grid-row: 1;

grid-column: 3;

}

Bork!


























diam.































#msedgesummit

.child-4 {

grid-row: 2;

grid-column: 3;

}1. Chasing squirrels




5. Cuddles


Things dogs like:

Bork!


























diam.































They’re

good

dogs.

#msedgesummit

.child-5 {

grid-row: 3;

grid-column: 3;

}





5. Cuddles


Things dogs like:













elementum tortor. Cras vitae nulla

semper, elementum mauris id,

semper lectus. Maecenas

consequat felis et suscipit. Lorem

ipsum dolor sit amet,

Bork!


























diam.































They’re

good

dogs.

GRID AREAS

#msedgesummit

.parent {

grid-template-rows:

1fr auto 4em 1fr;

}

#msedgesummit

auto

1fr

1fr

4em

.parent {

grid-template-rows:

1fr auto 4em 1fr;


6em 16em auto;

}

#msedgesummit

6em 16em auto

.parent {

grid-template-rows:

1fr auto 1fr;


6em 16em auto;

grid-template-areas:

“logo nav nav”

“side side main”

“side side social”

“foot foot foot”

}

#msedgesummit

.parent {

grid-template-rows:

1fr auto 1fr;


6em 16em auto;

grid-template-areas:

“logo nav nav”

“side side main”

“side side social”

“foot foot foot”

}

#msedgesummit

nav

side main

social

foot

#msedgesummit

nav

side main

social

foot

.logo {grid-area: logo;}

.nav {grid-area: nav;}

.sidebar {grid-area: side;}

.main {grid-area: main;}

.social {grid-area: social;}

.footer {grid-area: foot;}

IMPLICIT PLACEMENT

AND AUTO-FILL/FIT

#msedgesummit

#msedgesummit

#msedgesummit

.posts {


repeat(auto-fit,

minmax(12em, 1fr));

}

.post-preview:first-child {

grid-column: 1 / span 2;

}

.posts {


repeat(auto-fit,

minmax(12em, 1fr));

}



}

#msedgesummit

.posts {


repeat(auto-fit,12em);

}



}

#msedgesummit

.posts {


repeat(auto-fit, 12em);justify-items: center;

}

#msedgesummit

.posts {


repeat(auto-fit, 12em);justify-items: space-between;

}

#msedgesummit

#msedgesummit

.posts {


repeat(auto-fit, 12em);justify-items: center;

}

.posts {


repeat(auto-fill, 12em);

}

#msedgesummit

EXPLICIT AND AUTO TRACKS

#msedgesummit

#msedgesummit

#msedgesummit

.album {

grid-template-rows:

repeat(3, auto);

grid-auto-rows: 12em;

}

#msedgesummit

.album img {

justify-self: stretch;

align-self: stretch;

object-fit: cover;

}

#msedgesummit

.album img:nth-child(4) {

align-self: center;

}

#msedgesummit

.album img:nth-child(4) {

align-self: self-end;

}

FIT-CONTENT

#msedgesummit

#msedgesummit

#msedgesummit

.reqs {


fit-content(20em) 50em;

justify-content: center;

}

MIX IT ALL TOGETHER

#msedgesummit

#msedgesummit

#msedgesummit

aka.ms/more-grid-1Jen Simmons

#msedgesummit

aka.ms/more-grid-2Dudley Storey

#msedgesummit

aka.ms/more-grid-3Chen Hui Jing

#msedgesummit

aka.ms/more-grid-4liamj on Codepen

#msedgesummit

LEARN MORE

aka.ms/grid-spec

gridbyexample.com

What about…

#msedgesummit

BROWSER SUPPORT?

#msedgesummit

NEW SYNTAX ON BY DEFAULT IN

#msedgesummit

caniuse.com/#feat=css-grid

Oct 2017 57+ 52+ 10.1+

ORIGINAL PREFIXED SYNTAX SUPPORTED IN

#msedgesummit


All 10+

NOTABLE BROWSERS W/O SUPPORT

#msedgesummit


ORIGINAL GRID SYNTAX?

#msedgesummit

#msedgesummit

NEW ORIGINAL

display: grid display: -ms-grid

grid-template-columns -ms-grid-columns

grid-template-rows -ms-grid-rows

grid-column -ms-grid-column,

-ms-grid-column-span

grid-row -ms-grid-row,

-ms-grid-row-span

justify-content

(assuming horizontal writing mode)

-ms-grid-column-align

align-content

(assuming horizontal writing mode)

-ms-grid-row-align

#msedgesummit

NEW ORIGINAL

order

Named grid lines

repeat() value with auto-fill and

auto-fit keywords

grid-auto-rows, grid-auto-columns

grid-auto-flow

grid-gap, etc.

justify-items

align-items

POLYFILS AND FALLBACKS?

#msedgesummit

#msedgesummit

Photo by Wortley on Pixabay

GO FORTH AND

PROGRESSIVELY ENHANCE

#msedgesummit

@supports (display: grid) {

}

@supports (display: grid) or (display: -ms-grid) {

}

#msedgesummit

@supports (display: grid) and (not(display: -ms-grid)) {

}

WARNING!

THIS WILL ONLY LEAD TO SADNESS:

#msedgesummit

@supports (display: grid) {

}

THIS IS ALL YOU NEED:

HOW TO CONVINCE CLIENTS AND

STAKEHOLDERS ON PROGRESSIVE

ENHANCEMENT?

#msedgesummit

#msedgesummit

Styletil.es

#msedgesummit

DESIGN PARITY

DESIGN BUG FIXES

BASIC FUNCTIONALITY

#msedgesummit

Photo by Michael Goele

#msedgesummit

Photo by Steve Buissinne

#msedgesummit

Photo by danfador on Pixabay

#msedgesummit

Thank you!

aka.ms/summit-grid

@somelaniesaid

melanierichards

Web designer / front-end...

Documents

Transcript of Web designer / front-end...