Designing with Grid

A presentation at Generate Conf in April 2017 in New York, NY, USA by Jen Simmons

CSS Gr id re volutionize s web de sign — page layout on the web.

Nicole Sullivan 2008 Ana Debenham 2011 Brad Frost 2013 D " igning Systems of Component s

c olor palet te typography palet te layout palet te

The Official Timeline of Web Page Layout

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

CSS Grid Flexbox Alignment Writing Modes Multicolumn Viewport Units Transforms Object Fit Clip-path
Masking Shape-outside Initial-letter Flow
Floats Block Inline Inline-block Display:table Margin Negative margins Padding everything else
in CSS

This ne w CSS re volutionize s
web page layout.

Grid Area Grid Line Grid Track Grid Track Grid Cell Grid Line Grid Line Grid Line Grid Line

<body> <header>…</header> <main> <article> <h1> <p> <p> <p> <figure> <p> </article> </main> <aside>…</aside> <footer>…</footer> </body> body { display: grid; grid-template-columns: // some sort of code; }

.container { display: grid; grid-template-columns:
repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); } .item { grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } 1 2 3 4 2 3 4 1 5

You define
e size and/or
number of rows
and/or
columns Let
e browser
define number or
size of rows (or columns)

P lace each $ em   into a specific   cell or area Let
e browser
place every
ing
using
auto-placement
a lgor $ hm

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

2 portions
of
available   space set by   content size fixed 1 portion of available   space

start center end justify -items: s t r e t c
h

start center end align-items: s t r e t c h

Y ou can use Grid
to line t hings up.
Or not.

visual hierarchy Lorem ipsum dolor sit amet FUSCE UT TURPIS SIT AMET

My dee p r espect for form and positive and negative space comes from studying Frank Lloyd Wright ’s idea of com pr ession and ex pansion. You walk into a F.L.W. building and the entrance way is so sm all it makes you almost dip your head. And then as soon as you walk into the m ain r oom, he blows up the space, and it m akes you fee l ‘oh, that ’s so good’. — P laton, photographer “

from Designing the Editorial Experience, Sue Apfelbaum and Juliette Cezzar

Storyboards for Star Wars,
directed by George Lucas. Spartacus, directed by Stanley Kubrick.
Storyboards created by Saul Bass .

Grid rows & columns Alignment
Viewport Units

what does it mean to have a   reading experience with   a frame, where things move in and out of that frame?

what does it mean to have a   interaction experience with a frame, where things move in and out of that frame?

“ THE VIGNELLI CANON Great designs can be achieved without the use of the grid, but the grid is a very useful tool to guarantee results.
Ultimately the most important tool is the management of the white space in layouts. It is the white space that makes the layout sing. Bad layouts have no space left for breathing — every little space is covered by a cacophony of type sizes, images, and screaming titles.

px em % pixels (or rem) percents 60px 10em 20%

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

10 0 % 32% 32% 32% 2% 2% 100% – 4% = 96% = 32% 3 3

10 0 % 31. 3 3 3 % 31. 3 3 3 % 31. 3 3 3 % 3% 3% 100% – 6% = 94% = 31.333% 3 3

10 0 % 31. 6 6 6 % 31. 6 6 6 % 31. 6 6 6% 2.5% 2.5% 100% – 5% = 95% = 31.666666666666666% 3 3

10 0 % x x x 2em 2em @media (min-width: 600px) { .box { width: calc(100-(22em)/3)%;}} @media (min-width: 800px) { .box { width: calc(100-(32em)/4)%;}} @media (min-width: 1000px) { .box { width: calc(100-(42em)/5)%;}} @media (min-width: 400px) { .box { width: calc(100-(12em)/2)%;}}

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

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

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

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

What happe ns whe n par ts of
the content / interface are ‘missing’? Or are shorter / longer
than ‘ideal’?

Modern Layouts:   Getting Out of Our Ruts Revolutionize Your Page:   Real Art Direction on the Web 2015 2016 available on jensimmons.com

jensimmons.com/post/feb-27-2017/learn-css-grid

A basic design is
functional.   A great one will   say something.” — Tinker Hat field,
shoe de signer for Nike “

jensimmons.com
@jensimmons layout.land
labs.jensimmons.com

Jen Simmons
@jensimmons

1 / 204

Now that CSS Grid is here, what are we going to do with it? Sure, we can create page layouts very similar to the ones we’ve been using for the last decade, but Grid also opens up a world of new possibilities. Graphic designers of the 20th century fell in love with using grids for their layouts. How might we apply their ideas to the web, and what might have to change? What do we need to think about when designing for this new paradigm? In this far-ranging talk, Jen will explore the realities and possibilities of new layout technologies and how they will change our craft. You'll leave with exciting new techniques and ideas for your design and development toolkit—and, more importantly, with the inspiration to create bold, new, previously unimagined layouts for the 21st century.

Designing with Grid

Link for this presentation:

HTML code for embedding:

Share on social media: