DESIGNINGLAYOUTS:THE NEW
SUPERPOWERS OF CSSWITH JEN SIMMONSThe Cheongju Early Printing Museum, Korea — lindagoeseast.com/2015/09/14/a-visit-to-the-cheongju-early-printing-museumHot metal composition: Pasteup ::Floats : CSS Grid

Today’s Plan

9:00 – now

Intronow – 10:00

Writing Modes

10:00 – 10:10

Break

10:10 – 11:00

Alignment, Logical Properties & bit for Flexbox

11:00 – 11:10

Break

11:10 - 12:00

Intro to CSS Grid

12:00 – 1:00

Lunch

1:00 – 2:00

CSS Grid

2:00 - 2:10

Break

2:10 – 3:00

More CSS Grid

3:00 – 3:10

Break

3:10 - 4:00

More bits

labs.jensimmons.com/2017/aeabosWriting Modes

“

It’s the World Wide Web, not
the Wealthy Western Web.

— Bruce Lawson

drafts.csswg.org/css-writing-modesdirection
writing-mode
text-orientation

When I’m writing or reading this is the way the characters flow

inline direction

<p>

<p>

<p>

<p>

block
flow
direction

<div>

div {display: block;
}

<div>

<div>

<div>

<div>

div {display: inline;
}

<div>

<div>

<div>

<div>

div {display: inline-block;
}

<div>

<div>

<div>

display: block;display: inline;
display: inline-block;developer.mozilla.org/docs/Web/CSS/display

Default CSS on HTML elements
display: block;display: inline;

div

span
i

h1
p
figurefigcaption
header
main
aside

em
a
img

blockdirectioninline direction

A

character orientation

A

character orientation

inline direction
block
direction

LATIN-LIKE SYSTEMS

A

characterorientation

inline direction

block
direction

ARABIC-LIKE SYSTEMS

A

characterorientation

inline direction

block
direction

direction

.foo { direction: ltr; }.foo { direction: rtl; }<!DOCTYPE html><html lang="en-US" dir="ltr"><head> … </head><body> … </body></html><p>English words</p><p><bdo dir="rtl">.‫اﻟﻜﻠﻤﺎت اﻟﻌﺮﺑﯿﺔ‬</bdo></p><p>English words in this paragraph.
<bdi dir="rtl">.‫< ﻟﻜﻠﻤﺎت‬/bdi> Some
more LTR words, same paragraph.</p>

LATIN-LIKE SYSTEMS
inline direction

ARABIC-LIKE SYSTEMS
inline direction

block
directionblock
direction.css {direction: ltr;}<html dir="ltr"><bdo dir="ltr"><bdi dir="ltr">.css {direction: rtl;}<html dir="rtl"><bdo dir="rtl"><bdi dir="rtl">

block
direction

inline direction

MONGOLIAN-LIKE SYSTEMS

blockdirection

inline direction

MONGOLIAN-LIKE SYSTEMSHAN-LIKE SYSTEMS*Chinese, Japanese, Korean & moreinline direction

block
direction

HAN-LIKE SYSTEMS*Chinese, Japanese, Korean & moreinline direction

block
direction

inline direction

block
directionHAN-BASED SYSTEMS*Chinese, Japanese, Korean & moreinline direction

block
direction

inline direction

block
direction

writing-mode

THREE OPTIONS FOR WRITING-MODE
writing-mode:
horizontal-tb;

w/
e
l
g
tog
dir

writing-mode:
vertical-lr;

writing-mode:
vertical-rl;

chenhuijing.com/zh-typechenhuijing.com/blog/chinese-web-typographyh1:nth-child(2) {writing-mode: vertical-rl;}

writing-mode: vertical-lr;

1) text flowing2) like this1) text flowing2) like this

O
N

!
E
P

writing-mode: vertical-rl;

MONGOLIAN-LIKE SYSTEMSMONGOhelloTop ofpage

Top of(Latin-like)charactersAHAN-LIKE SYSTEMSMONGOLIAN-LIKE SYSTEMS

1) text flowing2) like this2) like this1) text flowing

THREE OPTIONS FOR WRITING-MODE
writing-mode:
horizontal-tb;

writing-mode:
vertical-lr;

writing-mode:
vertical-rl;

inline direction

block
direction
creates a vertical typographic mode

inline direction

block
direction

direction
block

inline direction

w/
e
l
g
tog
dir

TWO MORE (FUTURE) OPTIONS FOR WRITING-MODE

ly
on

block
directionA

creates a horizontal typographic mode

inline direction

inline direction

writing-mode:
sideways-rl;

block
directionA

writing-mode:
sideways-lr;

inline direction

block
direction

inline direction

block
directionA෈

writing-mode:
sideways-rl;
writing-mode:
vertical-rl;A

direction
block

inline direction

block
direction

writing-mode:
sideways-lr;

inline direction

writing-mode:
vertical-lr;

THREE OPTIONS FOR WRITING-MODE
writing-mode:
horizontal-tb;

writing-mode:
vertical-lr;

writing-mode:
vertical-rl;

inline direction

block
direction
creates a vertical typographic mode

inline direction

block
direction

direction
block

inline direction

w/
e
l
g
tog
dir

My Cool Website

My Cool Website

o
h
?
w

My Cool Website

writing-mode: vertical-rl;transform: rotate(180deg);text-orientation: sideways;(needed to fix punctuation / underlining)text-align: right;

text-orientation

HAN-LIKE SYSTEMS෈THREE OPTIONS FOR TEXT-ORIENTATION

text-orientation:
mixed;

text-orientation:
upright;
options for vertical writing modes

text-orientation:
sideways;writing-mode:
vertical-rl;

inline direction

text-orientation: mixed;

block
direction

inline direction

block
direction

creates a vertical typographic mode

writing-mode:
sideways-rl;

creates a horizontal typographic modeMy Cool Website

writing-mode: vertical-rl;transform: rotate(180deg);text-orientation: sideways;(needed to fix punctuation / underlining)text-align: right;

SUMMARYA

character orientation

inline direction
block
direction

LATIN-LIKE SYSTEMSAARABIC-LIKE SYSTEMSAHAN-LIKE SYSTEMS*Chinese, Japanese, Korean & more෈෈

MONGOLIAN-LIKE SYSTEMS

dirwriting-mode
text-orientation

LATIN-LIKE SYSTEMSA

ARABIC-LIKE SYSTEMS

A

inline direction

inline direction

block
directionblock
direction.css {direction: ltr;}<html dir="ltr"><bdo dir="ltr"><bdi dir="ltr">.css {direction: rtl;}<html dir="rtl"><bdo dir="rtl"><bdi dir="rtl">

THREE OPTIONS FOR WRITING-MODE
writing-mode:
horizontal-tb;

A

inline direction෈

creates a vertical typographic mode

inline direction

block
direction

direction
block

block
direction

writing-mode:
vertical-rl;෈inline direction

w/
e
l
g
tog tioncdirewriting-mode:
vertical-lr;

TWO MORE (FUTURE) OPTIONS FOR WRITING-MODE

ly
on

block
directionA

creates a horizontal typographic mode

inline direction

inline direction

writing-mode:
sideways-rl;

block
directionA

writing-mode:
sideways-lr;

THREE OPTIONS FOR TEXT-ORIENTATION

text-orientation:
mixed;

text-orientation:
upright;
options for vertical writing modes

text-orientation:
sideways;CODE IT UP

section {direction: ltr;
writing-mode: horizontal-tb;}(These are all the defaults.
No need to specify them.)
Example: Writing Mode 1A<section><bdo dir="rtl">...
</bdo></section>

Example: Writing Mode 1Asection {writing-mode: vertical-rl;}(This triggers
text-orientation: mixed
as the default.)
Example: Writing Mode 1Asection {writing-mode: vertical-lr;}

Example: Writing Mode 1Asection {writing-mode: sideways-rl;}

Example: Writing Mode 1Asection {writing-mode: sideways-lr;}

Example: Writing Mode 1Asection {writing-mode: vertical-rl;
text-orientation: upright;}

Example: Writing Mode 1Asection {writing-mode: vertical-lr;
text-orientation: upright;}

Example: Writing Mode 1AQUESTION TIME
COMING SOONh1 {writing-mode: vertical-rl;}

Example: Writing Mode 4Ah1 {writing-mode: vertical-rl;transform: rotate(180deg);text-align: right;}

Example: Writing Mode 4Bh1 {writing-mode: vertical-rl;
text-orientation: upright;
text-transform: uppercase;}Example: Writing Mode 4Ch1 {writing-mode: vertical-rl;
text-orientation: upright;
text-transform: uppercase;transform: rotate(180deg);}

Example: Writing Mode 4D

<main><h1><span>Made</span><span>by</span><span>Few</span></h1></main>Example: Writing Mode 3Ah1 span:nth-child(2) {writing-mode: vertical-rl;
text-orientation: upright;
font-size: 45%;}

Example: Writing Mode 3Ah1 {display: grid;}h1 span:nth-child(1) {grid-column: 1 / 3;
grid-row: 1 / 2;}h1 span:nth-child(2) {grid-column: 1 / 2;
grid-row: 2 / 3;}h1 span:nth-child(3) {grid-column: 2 / 3;
grid-row: 2 / 3;}

Example: Writing Mode 3AQUESTIONS?

Writing Modes

For the rest of today…

A

character orientation

inline direction
block
direction

Start & Endblockinlineblock start

inlinestart

inlineend

block end

inline start

block end

block start

inline endinline start

block start

block end

inline endinline end

block start

block end

inline startstart

end

start

end

start

start

end

end

Logical Properties

margin-block-start: 1rem;
padding-inline-end: 1rem;border-block-end: 1px solid black;text-align: start;
float: inline-start;drafts.csswg.org/css-logicalAlignmentw3.org/TR/css-align-3

flex-startflex-end
centerstretchspace-between
space-aroundstart / flex-startend / flex-end
centerspace-between
space-aroundspace-evenly
stretchflex-startflex-end
centerstretchbaseline(put on the container)*-content*-items

effects content groupeffects individual items(put on item)*-selfeffects individual items

Justify vs. AlignblockinlineAlignJustify

Justify

start

s

t

center
r e t

c

h

end

Alignstart

center

end

s
t
r
e
t
c
h

cross axis

main axis

flex-direction: row;cross axis

Alignmain axis

Justifyflex-direction: row;Justify

main axis

cross axis

Alignflex-direction: column;

Grid

1

2

3

4

7

Justify

5

8

6

Align

9

writing-mode: horizontal-tb;
grid-auto-flow: row;

Grid

7

4

1

2

5

3

Justify

6

8

Align

9

writing-mode: horizontal-tb;
grid-auto-flow: column;

Align

Justifyw3.org/TR/css-align-3

flexboxdefense.com

flexboxfroggy.com

Flexbox

FAQ: Flexbox vs. CSS Grid?

Flexbox lines things up
in one direction

Grid lines things up
in two directions

Grid

Grid

Flexbox

Flexbox

Flexbox

Grid
FlexboxGridBoth superpowers are useful.
Which do you want?

CSS Grid yet?

w3.org/TR/css-grid-1

You must support
browsers that
do not understand
CSS Grid.

Works

Doesn’twork

Don’t Use It
Use ItDon’tUse ItUse ItWorks

Doesn’twork

Don’tUse ItUse ItWorks

Doesn’twork

Don’tUse ItUse ItWorks

Doesn’twork

Don’tUse ItFired.

Use ItWorks

Doesn’twork

Don’tUse ItFired.

Use ItWorks

Doesn’twork

Don’tUse It✔

Use ItFired.
Works

Doesn’twork

Don’tUse ItUse ItWorks

Doesn’twork

Don’tUse ItUse It andDon’t Use It
Works and
Doesn’t Work

Don’tUse ItX

Use It andDon’t Use It
Works and
Doesn’t Work

.box {
background: #bbb;
border: 10px solid black;border-radius: 50px;}

.box {background: #bbb;
border: 10px solid black;border-radius: 50px;}

.box {
background: #bbb;
border: 10px solid black;border-radius: 50px;}

Firefox
Safari
ChromeIE9+
Edge(on all operating systems).box {
background: #bbb;
border: 10px solid black;border-radius: 50px;}

Opera Mini
IE8
IE7
IE6

img {width: 200px;
margin: 0 1.5em 0.5em 0;
float: left;shape-outside: circle();}* There is a prefix: -webkit-shape-outside: circle();img {
width: 200px;
margin: 0 1.5em 0.5em 0;
float: left;shape-outside: circle();}* There is a prefix: -webkit-shape-outside: circle();p::first-letter {color: rgba(255,190,150,0.9);
font-weight: bold;
margin-right: 0.5em;-webkit-initial-letter: 4;
initial-letter: 4;}

p::first-letter {color: rgba(255,190,150,0.9);
font-weight: bold;
margin-right: 0.5em;-webkit-initial-letter: 4;
initial-letter: 4;}

@supports (initial-letter: 4 ) or(-webkit-initial-letter: 4 ) {p::first-letter {color: rgba(255,190,150,0.9);
font-weight: bold;
margin-right: 0.5em;-webkit-initial-letter: 4;
initial-letter: 4;}}

@supports (foo: value) {// some code here}

hacks.mozilla.org/2016/08/using-feature-queries-in-css

jensimmons.com/
presentation/
progressing-ourlayouts

// simplified layout// for older browsers@supports (display: grid) {// code for newer browsers// including overrides}// simplified layout// for older browsers@supports (display: grid) {// code for newer browsers// including overrides}You have two choices forInternet Explorer (& Edge):1) Leverage the 2012 Grid
implementation.
2) Pretend IE has no Grid.

You have two choices forInternet Explorer (& Edge):1) Use old -ms-* syntax.
2) Or don’t.

display: grid;
grid-template-columns: repeat(4, 100px);
display: -ms-grid;-ms-grid-columns: (100px)[4];rachelandrew.co.uk/archives/2016/11/26/should-i-tryto-use-the-ie-implementation-of-css-grid-layout

autoprefixer

// for non-Grid browsers@supports (display: grid) or(display: -ms-grid) {// for IE, Edge// and for modern-Grid-supporting}// for non-Grid browsers@supports (display: grid) {// for modern-Grid-supporting }@supports (display: -ms-grid) {// for IE, Edge }Edge is coming

CSS Gridw3.org/TR/css-grid-1

Grid ContainerGrid Items

<main><div>item</div><div>item</div><div>item</div>
this is an anonymous grid item
<div>item</div>
hello world<section>more stuff</section><footer>conclusion</footer></main>

<ul>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
</ul>

<body><header><main><article><h1><p><figure><aside><footer></body><body><header>…</header><main><article>
<h1>
<p>
<p>
<p>
<figure><p></article></main><aside>…</aside><footer>…</footer></body>body {
display: grid;}<body><header>…</header><main><article>
<h1>
<p>
<p>
<p>
<figure><p></article></main><aside>…</aside><footer>…</footer></body>body {
display: grid;}

article {display: grid;}<body><header>…</header><main><article>
<h1>
<p>
<p>
<p>
<figure><p></article></main><aside>…</aside><footer>…</footer></body>body {
display: grid;}
main {
display: subgrid;}
article {display: subgrid;}<body><header>…</header><main><article>
<h1>
<p>
<p>
<p>
<figure><p></article></main><aside>…</aside><footer>…</footer></body>body {
display: grid;}

article {display: grid;}

<ul><li>…</li><li><h1>…</h1><img><p>…</p></li><li>…</li><li>…</li><li>…</li><li>…</li><li>…</li><li>…</li><li>…</li>
</ul>

ul {
display: grid;
grid-template-columns:
repeat(auto-fit,minmax(100px, 1fr));
grid-gap: 0.5rem 1rem;}li {// are Grid items
display: flex;
flex-flow: column;}
img {order: -1;}

Headline Here
This is teaser text. It
comes in different lengths.

Headline Here
This is teaser text. It
comes in different lengths.
Here we see more content
filling the box up all the way.

This Headline
This is teaser text. It
comes in different lengths.

Headline

Headline
This is teaser text.

Headline That isLonger & Wraps
This is teaser text. It
comes in different lengths.

Headline Here
This is teaser text. It
comes in different lengths.

Headline Here
This is teaser text. It
comes in different lengths.
Here we see more content
filling the box up all the way.

This Headline
This is teaser text. It
comes in different lengths.

Headline

Headline
This is teaser text.

Headline That isLonger & Wraps
This is teaser text. It
comes in different lengths.

Headline Here
This is teaser text. It
comes in different lengths.

Headline Here
This is teaser text. It
comes in different lengths.
Here we see more content
filling the box up all the way.

This Headline
This is teaser text. It
comes in different lengths.

Headline

Headline
This is teaser text.

Headline That isLonger & Wraps
This is teaser text. It
comes in different lengths.

Headline Here
This is teaser text. It
comes in different lengths.

Headline Here
This is teaser text. It
comes in different lengths.
Here we see more content
filling the box up all the way.

This Headline
This is teaser text. It
comes in different lengths.

Headline

Headline
This is teaser text.

Headline That isLonger & Wraps
This is teaser text. It
comes in different lengths.

Headline Here
This is teaser text. It
comes in different lengths.

Headline Here
This is teaser text. It
comes in different lengths.
Here we see more content
filling the box up all the way.

This Headline
This is teaser text. It
comes in different lengths.

Headline

Headline
This is teaser text.

Headline That isLonger & Wraps
This is teaser text. It
comes in different lengths.

Container

Item

Item

Item

Terminology

Grid ContainerGrid Items

Grid Line
Grid Track
Grid Line

Grid Track

Grid Cell
Grid Line

Grid Area

Grid Line

Grid LineGrid Line
Grid Track
Grid Gap

Grid Line

Grid Gap

Grid Line

Grid Gap

Grid Line

Grid Track

Grid
Cell

Grid Area

Grid LineThe Gridvs.
The Content

• Exists in HTML• Can be styled,

like anything in HTML• Exists in CSS• Can NOT be styled• It doesn’t exist

in the DOM

labs.jensimmons.com

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

ul {display: grid;
grid-template-columns:
repeat(4, 100px);
grid-gap: 4px;}
li {// nothing}<ul><li><img src="/file1.jpg" ></li><li><img src="/file2.jpg" ></li><li><img src="/file3.jpg" ></li><li><img src="/file4.jpg" ></li><li><img src="/file5.jpg" ></li><li><img src="/file6.jpg" ></li><li><img src="/file7.jpg" ></li>
</ul>

ul {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-gap: 4px;}
li {// nothing}img { display: block; width: 100%; }ul {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-gap: 4px;
}
/*

or

*/

ul {
display: grid;
grid-template-columns: 100px 100px 100px 100px;
grid-gap: 4px;}

ul {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 0.25em;
}
/*

or

*/

ul {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-gap: 0.25em;}

fr unit = “fraction”

100%

2.5%
31.666%

2.5%
31.666%31.666%

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

100%

2em
1fr

2em
1fr

1fr

1fr

1fr

1fr

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

1fr

1fr

1fr

1fr

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

2fr

1.5fr

1fr

2fr + 1.5fr + 1fr = 4.5fr total
therefore, now 1fr = 2/9ths of the space

50px

2fr

1fr

1fr

min-content

ul {display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 0.25em;
}
/*

or

*/

ul {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-gap: 0.25em;}

Comma ,or not to comma?

grid-template-columns: repeat(5, 1fr);
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;

ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
grid-gap: 0.25rem;}ul {display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
grid-gap: 0.25rem;
}
/*

or

*/

ul {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
grid-gap: 0.25rem;
}

t
ll

auto-fiauto-figridbyexample.com/video/series-auto-fill-auto-fit

Options forgrid-template-columns
grid-template-rows

.grid-container {display: grid;
grid-template-columns: 1fr 1fr 1fr;}

some other syntax options (each with different results)
grid-template-columns: 1fr 5fr 2.5fr;
grid-template-columns: 8em 1fr 300px;
grid-template-columns: 1fr 1fr 2fr 3fr 5fr 8fr 13fr 21fr 34fr;
grid-template-columns: repeat(7, 1fr);
grid-template-columns: repeat(3, 200px 1fr 25%);
grid-template-columns: repeat(auto-fill, 10rem);
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-template-columns: 4rem 2fr repeat(5, 1fr) 300px;

Units for setting Grid Track Sizes‣ length: px, em, rem, vw, vh‣ percent‣ fraction unit:

1fr‣ minmax();‣ size of content: min-content / max-content / fit-content‣ autoul {display: grid;
grid-template-columns:
repeat(auto-fit,minmax(120px, 1fr));
grid-gap: 0.25rem;// nothing about rows}li {// nothing needed}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 "eminto a specificcell or area

Let !e browser
place every!ing
using
auto-placement
algor"hmul {
display: grid;
grid-template-columns:
repeat(4, 1fr);}

li:nth-child(1) {grid-column: 2 / 3;
grid-row: 1 / 2;}

li:nth-child(1) {grid-column: 2 / 3;
grid-row: 1 / 2;}
li:nth-child(2) {grid-column: 4 / 5;
grid-row: 2 / 3;}
li:nth-child(3) {grid-column: 3 / 4;
grid-row: 3 / 4;}
li:nth-child(4) {…}li:nth-child(5) {…}.item {grid-row-start: 1;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 4;}

1.item {
grid-row: 1 / 3;
grid-column: 2 / 4;}

3

.item {
grid-area: 1 / 2 / 3 / 4;
}

2

4

5

1

2

3

grid-column: 2 / 4;
grid-row: 1 / 3;

4

TRY IT OUT

Exercises Set 1

Exercises Set 1

Some bits for the Exercises

display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-columns: 2fr 4fr 3fr 1fr;
grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
grid-gap: 1rem;
grid-auto-flow: dense;
li:nth-child(2) { }grid-row: 1 / 2;
grid-column: 1 / 2;
grid-row: span 2;
grid-column: span 2;

Line Numbers

1

1

2

3

4

5

6

2

3

4

5

Grid Line Numbers
Line Numbers,
not track numbers —different than what
we are used to!

1

2

3

4

6 lines
5 tracks
4 gaps

5

6

1

1

2

3

4

grid-row: 1 / 2;
grid-column: 1 / 2;

grid-row: 2 / 3;
grid-column: 2 / 4;3grid-row: 3 / 5;
grid-column: 3 / 5;

grid-row: 4 / 5;
grid-column: 1 / 2;

5

6
grid-row: 1 / 2;
grid-column: 5 / 6;

2

4

5

1
.item-A {grid-row: 1 / 3;
grid-column: 2 / 4;}
.item-B {grid-row: 4 / 5;
grid-column: 1 / 2;}
.item-C {grid-row: 4;
grid-column: 3;
}

2

1

2

3

4

grid-row: 1 / 3;
grid-column: 2 / 4;3

4
grid-row: 4 / 5;
grid-column: 1 / 2;

5grid-row: 4;
grid-column: 3;

1.item {
grid-area: 1 / 2 / 3 / 4;}
.item {
grid-row-start: 1;
grid-column-start: 2;
grid-row-end: 3;
grid-column-end: 4;
}

2

3

4

5

1

2

3

4

.item {grid-area: 1 / 2 / 3 / 4;
}

3

4

5

3
first

4

fourth22second

1

1

third

.item {grid-area: 1 / 2 / 3 / 4;}

.item-B {grid-area: 4 / 1;
}

3

4

5

3
first

4

fourth22second

1

1

third

ul {
display: grid;
grid-template-columns:
4fr 2fr 2fr 3fr 6fr;}

li:nth-child(1) {grid-row: 1 / 3;
grid-column: 1 / 3;z-index: 2;}
li:nth-child(2) {grid-row: 2 / 6;
grid-column: 2 / 5;}
li:nth-child(3) {grid-row: 4 / 7;
grid-column: 4 / 6;
z-index: 2;}

li:nth-child(1) {grid-row: 1 / span 2;
grid-column: 1 / span 2;
z-index: 2;}
li:nth-child(2) {grid-row: 2 / span 4;
grid-column: 2 / span 3;}
li:nth-child(3) {grid-row: 4 / span 3;
grid-column: 4 / span 2;
z-index: 2;}

These all have the same results:
grid-column: 1 / 4;// starts at line 1, goes to line 4

grid-column: 1 / span 3;// starts at line 1, spans 4 cells

grid-column: span 3 / 4;// spans 3 cells, ends at line 4

1

2

1

2

3

4

5

.grid-item {grid-column: 1 / 5;
grid-row: 3 / 5}// goes from vertical line 1 to 5// goes from horizontal line 3 to 5

some other syntax options (with some different results)
grid-column: 3 / 5;// starts at line 3, goes to line 5

grid-column: 3 / span 2;// starts at line 3, spans 2 cells

grid-column: span 2 / 5;// spans 2 cells, ends at line 5

grid-column: span 2;// spans 2 cells, placed by algorithm

grid-column: 4;// starts at line 4, spans 1 cell

grid-column: 1 / -1;// starts at line 1, goes to line -1

grid-column: horse / pig;

TRY IT OUT

Exercises Set 2

Some bits for the Exercises

display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-columns: 2fr 4fr 3fr 1fr;
grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
grid-gap: 1rem;
grid-auto-flow: dense;
li:nth-child(2) { }grid-row: 1 / 2;
grid-column: 1 / 2;
grid-row: span 2;
grid-column: span 2;

Line Numbers

1

2

3

4

5

6

-6

-5

-4

-3

-2

-1

1 -5

2 -4

3 -3

Grid Line Numbers
4 -2

5 -1

main {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(4, 1fr);}
aside {
grid-column: 1 / 3;
grid-row: 1 / -1;
background: yellow;}

Grid Auto Flow

1

2

3

4

5 auto placement

6

7

8

9

10

11

12

13

14

15

16

17

algorithm.container {grid-auto-flow: row;}

1

5

9

13

2

6

10

14

3

7

11

15

4

8

12

16

17

grid-auto-flow: column;

Grid

7

4

1

2

5

3

Justify

6

8

Align

9

writing-mode: horizontal-tb;
grid-auto-flow: column;ColumnRowwriting-mode: horizontal-tb;

Row

Columnwriting-mode: vertical-*;

1

5

9

13

2

6

10

14

3

7

11

15

4

8

12

16

17

grid-auto-flow: column;
writing-mode: horizontal-tb;

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17
grid-auto-flow: row;writing-mode: horizontal-tb;

1

2

3
grid-column: span 2;

4

5

6

7
grid-row: span 2;

grid-row: span 2;
grid-column: span 2;

8

9

10

11
grid-auto-flow: row;

grid-column: span 2;

1

2
4

6

3

5

7

8

9
11

12

10
13
grid-auto-flow: dense;grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: dense;
grid-auto-flow: row dense;
grid-auto-flow: column dense;

TRY IT OUT

Exercises Set 3

Some bits for the Exercises

display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-columns: 2fr 4fr 3fr 1fr;
grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
grid-gap: 1rem;
grid-auto-flow: dense;
li:nth-child(2) { }grid-row: 1 / 2;
grid-column: 1 / 2;
grid-row: span 2;
grid-column: span 2;

Named Lines

.container {grid-template-rows:
}

1fr

1fr

1fr;

.container {grid-template-rows:[cow] 1fr [horse] 1fr [dog] 1fr [pig];}

.container {grid-template-rows:[cow] 1fr[horse] 1fr [dog] 1fr [pig];}2

3.item {
grid-row: 3;
grid-column: horse / pig;
}

4

5

2

3

4

cow

horse

dog

pig

1

1

grid-template-rows: 1fr 1fr 1fr;
grid-template-rows:[cow] 1fr [horse] 1fr [dog] 1fr [pig];
grid-template-rows:[cow truck] 1fr [horse car] 1fr [dog boat];
grid-template-rows: repeat(auto-fit, 200px 1fr);
grid-template-rows: repeat(auto-fit, [dog] 200px [cat] 1fr);
grid-template-rows: repeat(4,[even-start even-end] 80px [odd-start odd-end] 80px);

.container {grid-template-rows:[main-start] 1fr [main-end];}Grid AreasGrid Line
Grid Track
Grid Line

Grid Track

Grid Cell
Grid Line

Grid Area

Grid Line

Grid Line<body><header>…</header><main>…</main><aside>…</aside><footer>…</footer></body>

~75%

~25%

header {grid-area: header;}main {
grid-area: content;}
aside {
grid-area: sidebar;}
footer {grid-area: footer;}‘header’‘content’‘sidebar’‘footer’header {main{aside {
footer {grid-area: header; }grid-area: main;}
grid-area: aside; }grid-area: footer; }body {
display: grid;
grid-template-columns: 3fr 1fr;
grid-gap: 2rem;
grid-template-areas:"header header""content sidebar""footer footer";}‘header’‘main’
3fr‘aside’1fr‘footer’body {
display: grid;
grid-gap: 2rem;
grid-template-areas:"header""content""sidebar""footer";}@media (min-width: 800px) {body {
grid-template-columns:
3fr 1fr;
grid-template-areas:"header header""content sidebar""footer footer";}}Media Query

@media (min-width: 800px) {// something that happens once the// browser window is wider than 800px}

// Default layout for skinniest devices@media (min-width: 800px) {// something that happens once the// browser window is wider than 800px}

@media (max-width: 800px) {// something that only happens when the// browser window is narrower than 800px}

@media (max-width: 300px) { … }@media (min-width: 300px) and(max-width: 800px) { … }@media (min-width: 800px) { … }@media (min-height: 600px) { … }Explicit GridvsImplicit Grid

http://blogs.igalia.com/mrego/2016/02/01/deep-dive-into-grid-layout-placement/

by Manuel Rego Casasnovas

display: flow-root;Flexbox as intendedflex: initial;(do not grow, do shrink)flex: 0 1 auto;

flex: auto;(grow and shrink)flex: 1 1 auto;

flex: none;(do not grow or shrink)flex: 0 0 auto;

flex: <#>;
(distribute space by portions)flex: <#> 1 0;

Multicolumn

article {max-width: 500px;
margin: 0 auto;}article {column-count: 2;
column-gap: 2em;}

article {// column-count: 2;
column-width: 200px;
column-gap: 2em;}

img {width: 100%;}
article {column-width: 200px;
column-gap: 2em;
column-rule:
1px solid #444;}

THE END