Designing With Grid
UX Burlington@jenSimmons

Slides & more:@jensimmons

CSS Grid

The Kiss, 1896

Our medium is not done

Layout on the webphoto by Brad Frost, 2012, CC BY 2.0

BAAABCACBCBCstarter-kit
framework

D!igning Systems of Components

Nicole Sullivan
2008

Ana Debenham
2011

Brad Frost2013

Headline 1
Headline 2This is a paragraph of text. Do welike how this works? Yes, please. Ok.
Do all the text like this.

BUTTON

Headline 1
This is a paragraph of text. Do welike how this works? Yes, please. Ok.
Do all the text like this.

BUTTON
BUTTON
BUTTON

Headline

This is a paragraph of text. Do welike how this works? Yes, please.
Ok. Do all the text like this.
BUTTON

Headline

Headline

This is a paragraph of text. Do welike how this works? Yes, please.
Ok. Do all the text like this.
BUTTON

Headline

Headline

This is a paragraph of text. Do welike how this works? Yes, please.
Ok. Do all the text like this.
BUTTON

Headlinecolor palette
typography palettelayout paletteThe Official Timeline of Web Page Layout

TheNo-Layout
LayoutTable -based
Layouts

Hand -c oded
F loat Layouts

F rame wor k
Layouts

gnizamA!
erutu
FCSS Grid
Flexbox
Alignment
Writing Modes
Multicolumn
Viewport Units
Transforms
Object Fit
Clip-path
Masking
Shape-outside
Initial-letter

Flow
FloatsBlock
InlineInline-block
Display:table
MarginNegative margins
Padding
everything else
in CSSThis new CSS
revolutionizes web
page layout.

Nature of CSS Grid

’(Let s bust some assumptions)explicit vs. implicit

You define"e size and/or
number of rows
and/orcolumns

Let "e browser
define number orsize of rows
or columns

Place each #em
into a specificcell or area

Let "e browser
place each
#em usingauto-placement
algor#hmRows *and* Columns

ROWS!!!!!!!!!!!

Tracks don’t have to all
be the same size.

Content sized by
the size of a track.

Tracks sized by
the size of content.

fixedportion ofavailable
space —
2 parts

portion ofavailable
space —
1 partset bycontent size

Content doesn’t haveto fill a track.

justify-items:startstcenterr e t

endch

align-items:startcenterendst
retchYou can use Gridto line things up.
Or not.

What shall we dowith CSS Grid?

How do we know
where to put things?

visual hierarchy

FUSCE UT TURPIS SIT AMET

Lorem ipsum dolor sit amet

visual hierarchy

symmetryasymmetry

symmetryasymmetry

proxim#y

proxim#ydens#ydens#y“My deep respect for form andpositive and negative space comesfrom studying Frank Lloyd Wright ’sidea of compression and expansion.
You walk into a F.L.W. building andthe entrance way is so small it
makes you almost dip your head.
And then as soon as you walk into
the main room, he blows up thespace, and it makes you feel ‘oh,that ’s so good’.

— P laton, photographer

Graphic design for the web

Graphic design of the web

labs.jensimmons.com

What I’ve Discoveredin Six parts1. Overlap

from Designing the Editorial Experience, Sue Apfelbaum and Juliette Cezzar

labs.jensimmons.com/2017/01-003.html

labs.jensimmons.com/2017/01-002.html

labs.jensimmons.com/2017/01-002.html

labs.jensimmons.com/2017/01-018.html

labs.jensimmons.com/2017/02-001.html

Overlap

2, The Viewportstoryboards

Storyboards for Star Wars,directed by George Lucas.

Spartacus, directed by Stanley Kubrick.
Storyboards created by Saul Bass.

Grid rows & columns
Alignment
Viewport Unitslabs.jensimmons.com/2017/01-008.html

labs.jensimmons.com/2017/01-010.html

Viewport Units
25vh50vw
50vh

25vh50vw

Viewport Units
100vh50vmin

Framing

Filmic Language

Webic Language

what does it mean to have areading experience witha frame, where things movein and out of that frame?

what does it mean to have ainteraction experience witha frame, where things movein and out of that frame?

The Viewport

3. White Spacelabs.jensimmons.com/2017/01-003.html

“Great designs can be achieved
without the use of the grid, but thegrid is a very useful tool toguarantee results.
Ultimately the most important tool is
the management of the white spacein layouts. It is the white space thatmakes the layout sing. Bad layouts
have no space left for breathing —every little space is covered by acacophony of type sizes, images,
and screaming titles.

THE VIGNELLI CANON1. Control the size of the page?

Nope.

2. Line things up?

Yes. Easy.

3. Create white space?

Yes, absolutely.

4. Maintain aspect ratios?

Nope. Not yet.

labs.jensimmons.com/2017/01-021.html

labs.jensimmons.com/2017/01-021.html

Grid like a Modernist?

White Space4. Verticality

4. Verticalityphoto by Fan Hophoto by Fan Hophotos by Fan Holabs.jensimmons.com/2017/01-020.html

Verticality

5. Flexibility

labs.jensimmons.com/2017/02-004.html

px

pixels60px

em(or rem)

10em%

percents20%

min-content
max-content
frminmax()labs.jensimmons.com/2017/01-007.html

This is a phrase withseveral words.
This is a phrase with several words.
This isaphrasewithseveralwords.

fr unit = “fraction”

100%

33%

33%

33%

100%

33.33333%

33.33333%

33.33333%

100%

33.33333%

33.33333%

33.33333%

100%

2%
33%

2%
33%

33%

100%

2%
32%

2%
32%

100% – 4% = 96% = 32%
3332%

100%

3%
31.333%

3%
31.333%31.333%

100% – 6% = 94% = 31.333%
33

100%

2.5%
31.666%

2.5%
31.666%31.666%

100% – 5% = 95% = 31.666666666666666%
3
3

100%

2em

2em

x%
x%
x%
@media (min-width: 400px) { .box { width: calc(100-(1*2em)/2)%;}}@media (min-width: 600px) { .box { width: calc(100-(2*2em)/3)%;}calc(100-(2*2em)/3)%;}}@media (min-width: 800px) { .box { width: calc(100-(3*2em)/4)%;}}

100%

2em
1fr

2em
1fr

1fr

2em
1fr

2em1fr

1fr

1fr + 1fr + 1fr = 3fr total
therefore, 1fr = 1/3 of the space

2em
1fr

2em
1fr

2em
1fr

1fr

1fr + 1fr + 1fr + 1fr = 4fr total
therefore, now 1fr = 1/4 of the space

100px

100px

1fr

1fr

1fr

1fr

50px

2fr

1fr

1fr

min-content

1fr

6fr

2.4fr

2.4fr

2fr

from alistapart.com/article/content-out-layout

minmax()

labs.jensimmons.com/2017/01-003.html

.container {display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));// nothing about rows}.item {// nothing about item placement}

labs.jensimmons.com/2017/01-016.html

100px

1fr

1frminmax(40ch, 65ch)

1fr

grid-template-columns: 100px 1fr 1fr minmax(40ch, 65ch) 1fr;

“pixel perfect ”

What happens when parts ofthe content / interface are ‘missing’?
Or are shorter / longer
than ‘ideal’?

Design the flexibility model.

Flexibility

6. Creativity

labs.jensimmons.com/2017/01-004.html

1. Overlap
2. The Viewport
3. White Space
4. Verticality
5. Flexibility
6. Creativity

Time to play.
Time to learn.

www.layout.land

labs.jensimmons.com

2016

2015
Modern Layouts:
Getting Out of Our Ruts

Revolutionize Your Page:
Real Art Direction on the Web

available on jensimmons.com

jensimmons.com/post/feb-27-2017/learn-css-griddeveloper.mozilla.org/docs/Web/CSS/CSS_Grid_Layout

Time to explore.

“A basic design isfunctional.
A great one will
say something.”— Tinker Hatfield,
shoe designer for Nike

Thanks!

jensimmons.com@jensimmonslayout.land

labs.jensimmons.com