Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing Layouts at An Event Apart Boston

Designing Layouts at An Event Apart Boston

An all-day lecture on layout CSS — including Writing Modes, Alignment, Logical Properties, CSS Grid, Flexbox, and more.

D83926c323d4f9289f947b4b4e76b939?s=128

Jen Simmons

May 17, 2017
Tweet

Transcript

  1. DESIGNING LAYOUTS: THE NEW SUPERPOWERS OF CSS WITH JEN SIMMONS

  2. None
  3. None
  4. The Cheongju Early Printing Museum, Korea — lindagoeseast.com/2015/09/14/a-visit-to-the-cheongju-early-printing-museum

  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. None
  31. None
  32. None
  33. None
  34. None
  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. None
  42. None
  43. None
  44. None
  45. None
  46. None
  47. None
  48. None
  49. None
  50. Hot metal composition: Pasteup :: Floats : CSS Grid

  51. Today’s Plan

  52. 9:00 – now Intro now – 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
  53. labs.jensimmons.com/2017/aeabos

  54. None
  55. Writing Modes

  56. None
  57. “ — Bruce Lawson It’ s the World Wide Web,

    not the Wealthy Western Web.
  58. None
  59. drafts.csswg.org/css-writing-modes

  60. direction writing-mode text-orientation

  61. inline direction When I’m writing or reading this is the

    way the characters flow
  62. <p> <p> <p> <p> block flow direction

  63. div { display: block; } <div> <div> <div> <div>

  64. div { display: inline; } <div> <div> <div> <div>

  65. div { display: inline-block; } <div> <div> <div> <div>

  66. display: block; display: inline; display: inline-block;

  67. developer.mozilla.org/docs/Web/CSS/display

  68. display: block; div h1 p figure figcaption header main aside

    display: inline; span i em a img Default CSS on HTML elements
  69. block direction

  70. inline direction

  71. Acharacter orientation

  72. block direction inline direction Acharacter orientation

  73. LATIN-LIKE SYSTEMS block direction inline direction Acharacter orientation

  74. None
  75. ARABIC-LIKE SYSTEMS inline direction block direction Acharacter orientation

  76. direction

  77. .foo { direction: ltr; } .foo { direction: rtl; }

  78. None
  79. <!DOCTYPE html> <html lang="en-US" dir="ltr"> <head> … </head> <body> …

    </body> </html>
  80. <p>English words</p> <p><bdo dir="rtl"> .ﺔﯿﺑﺮﻌﻟا تﺎﻤﻠﻜﻟا </bdo></p>

  81. <p>English words in this paragraph. <bdi dir="rtl">.تﺎﻤﻠﻜﻟ </bdi> Some more

    LTR words, same paragraph.</p>
  82. LATIN-LIKE SYSTEMS ARABIC-LIKE SYSTEMS block direction inline direction block direction

    inline 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">
  83. None
  84. MONGOLIAN-LIKE SYSTEMS block direction inline direction

  85. MONGOLIAN-LIKE SYSTEMS block direction inline direction

  86. HAN-LIKE SYSTEMS block direction inline direction *Chinese, Japanese, Korean &

    more
  87. HAN-LIKE SYSTEMS block direction inline direction block direction inline direction

    *Chinese, Japanese, Korean & more
  88. None
  89. None
  90. None
  91. None
  92. HAN-BASED SYSTEMS block direction inline direction block direction inline direction

    *Chinese, Japanese, Korean & more
  93. writing-mode

  94. THREE OPTIONS FOR WRITING-MODE writing-mode: vertical-lr; writing-mode: vertical-rl; toggle w/

    dir writing-mode: horizontal-tb;
  95. None
  96. chenhuijing.com/zh-type

  97. chenhuijing.com/blog/chinese-web-typography

  98. None
  99. None
  100. None
  101. h1:nth-child(2) { writing-mode: vertical-rl; }

  102. NOPE! 1) text flowing 2) like this writing-mode: vertical-lr; 1)

    text flowing 2) like this writing-mode: vertical-rl;
  103. MONGOLIAN-LIKE SYSTEMS

  104. MONGO

  105. Top of page Top of (Latin-like) characters hello A

  106. 2) like this 1) text flowing 1) text flowing 2)

    like this MONGOLIAN-LIKE SYSTEMS HAN-LIKE SYSTEMS
  107. THREE OPTIONS FOR WRITING-MODE direction block inline direction writing-mode: vertical-lr;

    block direction inline direction writing-mode: vertical-rl; block direction inline direction toggle w/ dir writing-mode: horizontal-tb; creates a vertical typographic mode
  108. TWO MORE (FUTURE) OPTIONS FOR WRITING-MODE block direction inline direction

    writing-mode: sideways-lr; block direction inline direction writing-mode: sideways-rl; creates a horizontal typographic mode only A A
  109. block direction inline direction writing-mode: sideways-rl; block direction inline direction

    writing-mode: vertical-rl; A ෈
  110. direction block inline direction writing-mode: vertical-lr; block direction inline direction

    writing-mode: sideways-lr; A
  111. creates a vertical typographic mode THREE OPTIONS FOR WRITING-MODE direction

    block inline direction writing-mode: vertical-lr; block direction inline direction writing-mode: vertical-rl; block direction inline direction toggle w/ dir writing-mode: horizontal-tb;
  112. None
  113. My Cool Website

  114. My Cool Website how?

  115. My Cool Website writing-mode: vertical-rl; transform: rotate(180deg); text-orientation: sideways; (needed

    to fix punctuation / underlining) text-align: right;
  116. text-orientation

  117. HAN-LIKE SYSTEMS ෈

  118. None
  119. options for vertical writing modes text-orientation: mixed; text-orientation: upright; text-orientation:

    sideways; THREE OPTIONS FOR TEXT-ORIENTATION
  120. None
  121. None
  122. block direction inline direction writing-mode: sideways-rl; block direction inline direction

    writing-mode: vertical-rl; text-orientation: mixed; creates a horizontal typographic mode creates a vertical typographic mode
  123. My Cool Website writing-mode: vertical-rl; transform: rotate(180deg); text-orientation: sideways; (needed

    to fix punctuation / underlining) text-align: right;
  124. SUMMARY

  125. block direction inline direction Acharacter orientation

  126. LATIN-LIKE SYSTEMS A

  127. ARABIC-LIKE SYSTEMS A

  128. HAN-LIKE SYSTEMS *Chinese, Japanese, Korean & more ෈ ෈

  129. MONGOLIAN-LIKE SYSTEMS

  130. dir writing-mode text-orientation

  131. LATIN-LIKE SYSTEMS ARABIC-LIKE SYSTEMS block direction inline direction block direction

    inline 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"> A A
  132. THREE OPTIONS FOR WRITING-MODE direction block inline direction writing-mode: vertical-lr;

    block direction inline direction writing-mode: vertical-rl; block direction inline direction toggle w/ direction writing-mode: horizontal-tb; creates a vertical typographic mode ෈ ෈ A
  133. TWO MORE (FUTURE) OPTIONS FOR WRITING-MODE block direction inline direction

    writing-mode: sideways-lr; block direction inline direction writing-mode: sideways-rl; creates a horizontal typographic mode only A A
  134. options for vertical writing modes text-orientation: mixed; text-orientation: upright; text-orientation:

    sideways; THREE OPTIONS FOR TEXT-ORIENTATION
  135. CODE IT UP

  136. section { direction: ltr; writing-mode: horizontal-tb; } (These are all

    the defaults. No need to specify them.) Example: Writing Mode 1A
  137. <section><bdo dir="rtl"> ... </bdo></section> Example: Writing Mode 1A

  138. section { writing-mode: vertical-rl; } (This triggers text-orientation: mixed as

    the default.) Example: Writing Mode 1A
  139. section { writing-mode: vertical-lr; } Example: Writing Mode 1A

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

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

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

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

    1A
  144. QUESTION TIME COMING SOON

  145. h1 { writing-mode: vertical-rl; } Example: Writing Mode 4A

  146. h1 { writing-mode: vertical-rl; transform: rotate(180deg); text-align: right; } Example:

    Writing Mode 4B
  147. h1 { writing-mode: vertical-rl; text-orientation: upright; text-transform: uppercase; } Example:

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

    } Example: Writing Mode 4D
  149. None
  150. None
  151. <main> <h1> <span>Made</span> <span>by</span> <span>Few</span> </h1> </main> Example: Writing Mode

    3A
  152. h1 span:nth-child(2) { writing-mode: vertical-rl; text-orientation: upright; font-size: 45%; }

    Example: Writing Mode 3A
  153. 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
  154. QUESTIONS?

  155. Writing Modes

  156. For the rest of today…

  157. block direction inline direction Acharacter orientation

  158. Start & End

  159. block inline

  160. block end inline start inline end block start

  161. block end inline start inline end block start

  162. block start inline start inline end block end

  163. block start inline end inline start block end

  164. end start end start

  165. start start end end

  166. Logical Properties

  167. margin-block-start: 1rem; padding-inline-end: 1rem; border-block-end: 1px solid black; text-align: start;

    float: inline-start;
  168. None
  169. drafts.csswg.org/css-logical

  170. Alignment

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

  172. flex-start flex-end center stretch space-between space-around

  173. start / flex-start end / flex-end center space-between space-around space-evenly

    stretch
  174. flex-start flex-end center stretch baseline

  175. None
  176. (put on the container) *-content effects content group *-items effects

    individual items (put on item) *-self effects individual items
  177. None
  178. None
  179. Justify vs. Align

  180. block inline

  181. Align

  182. Justify

  183. start center end s t r e t c h

    Justify
  184. start center end s t r e t c h

    Align
  185. cross axis main axis flex-direction: row;

  186. cross axis main axis Justify Align flex-direction: row;

  187. main axis Justify cross axis Align flex-direction: column;

  188. Grid Justify 1 4 5 2 3 6 8 7

    9 Align writing-mode: horizontal-tb; grid-auto-flow: row;
  189. Grid Justify 1 4 5 2 3 6 8 7

    9 writing-mode: horizontal-tb; grid-auto-flow: column; Align
  190. None
  191. Align Justify

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

  193. None
  194. flexboxdefense.com flexboxfroggy.com

  195. Flexbox

  196. FAQ: Flexbox vs. CSS Grid?

  197. Flexbox lines things up
 in one direction

  198. Grid lines things up
 in two directions

  199. Grid

  200. Grid

  201. Flexbox

  202. Flexbox

  203. Flexbox

  204. Grid Flexbox

  205. Grid

  206. None
  207. Both superpowers are useful. Which do you want?

  208. CSS Grid yet?

  209. w3.org/TR/css-grid-1

  210. None
  211. None
  212. None
  213. None
  214. You must support browsers that 
 do not understand 


    CSS Grid.
  215. Works Doesn’t work

  216. Use It Don’t Use It

  217. Works Doesn’t work Use It Don’t Use It

  218. Works Doesn’t work Use It Don’t Use It

  219. Works Doesn’t work Use It Don’t Use It

  220. Works Doesn’t work Use It Don’t Use It Fired.

  221. Works Doesn’t work Use It Don’t Use It Fired.

  222. Works Doesn’t work Use It Don’t Use It Fired. ✔

  223. Works Doesn’t work Use It Don’t Use It

  224. Works and Doesn’t Work Use It and Don’t Use It

    Don’t Use It
  225. X Works and Doesn’t Work Use It and Don’t Use

    It Don’t Use It
  226. .box { background: #bbb; border: 10px solid black; border-radius: 50px;

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

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

    } .box { background: #bbb; border: 10px solid black; border-radius: 50px; } Opera Mini IE8 IE7 IE6 Firefox Safari Chrome IE9+ Edge (on all operating systems)
  230. None
  231. None
  232. img { width: 200px; margin: 0 1.5em 0.5em 0; float:

    left; shape-outside: circle(); } There is a prefix: -webkit-shape-outside: circle(); *
  233. img { width: 200px; margin: 0 1.5em 0.5em 0; float:

    left; shape-outside: circle(); } There is a prefix: -webkit-shape-outside: circle(); *
  234. None
  235. None
  236. None
  237. p::first-letter { color: rgba(255,190,150,0.9); font-weight: bold; margin-right: 0.5em; -webkit-initial-letter: 4;

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

    initial-letter: 4; }
  239. @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; } }
  240. @supports (foo: value) { // some code here }

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

  242. jensimmons.com/ presentation/ progressing-our- layouts

  243. // simplified layout // for older browsers @supports (display: grid)

    { // code for newer browsers // including overrides }
  244. None
  245. None
  246. None
  247. None
  248. None
  249. // simplified layout // for older browsers @supports (display: grid)

    { // code for newer browsers // including overrides }
  250. None
  251. None
  252. None
  253. None
  254. None
  255. You have two choices for 
 Internet Explorer (& Edge):

    1) Leverage the 2012 Grid implementation. 2) Pretend IE has no Grid.
  256. You have two choices for 
 Internet Explorer (& Edge):

    1) Use old -ms-* syntax. 2) Or don’t.
  257. display: grid; grid-template-columns: repeat(4, 100px); display: -ms-grid; -ms-grid-columns: (100px)[4];

  258. None
  259. rachelandrew.co.uk/archives/2016/11/26/should-i-try- to-use-the-ie-implementation-of-css-grid-layout

  260. autoprefixer

  261. // for non-Grid browsers @supports (display: grid) or (display: -ms-grid)

    { // for IE, Edge // and for modern-Grid-supporting }
  262. // for non-Grid browsers @supports (display: grid) { // for

    modern-Grid-supporting } @supports (display: -ms-grid) { // for IE, Edge }
  263. Edge is coming

  264. CSS Grid

  265. w3.org/TR/css-grid-1

  266. None
  267. None
  268. Grid Container

  269. Grid Items

  270. <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>
  271. <body> <header>…</header> <main> <article> <h1> <p> <p> <p> <figure> <p>

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

    </article> </main> <aside>…</aside> <footer>…</footer> </body> body { display: grid; } article { display: grid; }
  273. <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; }
  274. <body> <header>…</header> <main> <article> <h1> <p> <p> <p> <figure> <p>

    </article> </main> <aside>…</aside> <footer>…</footer> </body> body { display: grid; } article { display: grid; }
  275. <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; }
  276. 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. Headline This is teaser text. Headline That is Longer & Wraps This is teaser text. It comes in different lengths. Headline This Headline This is teaser text. It comes in different lengths.
  277. 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. Headline This is teaser text. Headline That is Longer & Wraps This is teaser text. It comes in different lengths. Headline This Headline This is teaser text. It comes in different lengths.
  278. 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. Headline This is teaser text. Headline That is Longer & Wraps This is teaser text. It comes in different lengths. Headline This Headline This is teaser text. It comes in different lengths.
  279. 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. Headline This is teaser text. Headline That is Longer & Wraps This is teaser text. It comes in different lengths. Headline This Headline This is teaser text. It comes in different lengths.
  280. 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. Headline This is teaser text. Headline That is Longer & Wraps This is teaser text. It comes in different lengths. Headline This Headline This is teaser text. It comes in different lengths.
  281. None
  282. None
  283. Container Item Item Item

  284. Terminology

  285. Grid Container

  286. Grid Items

  287. Grid Area Grid Line Grid Track Grid Track Grid Cell

    Grid Line Grid Line Grid Line Grid Line
  288. Grid Area Grid Track Grid Track Grid Cell Grid Line

    Grid Line Grid Line Grid Line Grid Line Grid Gap Grid Gap Grid Gap
  289. The Grid vs. The Content

  290. • Exists in HTML • Can be styled, 
 like

    anything in HTML
  291. • Exists in CSS • Can NOT be styled •

    It doesn’t exist 
 in the DOM
  292. labs.jensimmons.com

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

  294. None
  295. None
  296. None
  297. None
  298. None
  299. ul { display: grid; grid-template-columns: repeat(4, 100px); grid-gap: 4px; }

    li { // nothing }
  300. None
  301. None
  302. <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>
  303. ul { display: grid; grid-template-columns: repeat(4, 100px); grid-gap: 4px; }

    li { // nothing } img { display: block; width: 100%; }
  304. None
  305. 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; }
  306. None
  307. None
  308. 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; }
  309. fr unit = “fraction”

  310. 100% 31.666% 31.666% 31.666% 2.5% 2.5% 100% – 5% =

    95% = 31.666666666666666% 3 3
  311. 100% 1fr 1fr 1fr 2em 2em

  312. 1fr 1fr 1fr 1fr + 1fr + 1fr = 3fr

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

    = 4fr total therefore, now 1fr = 1/4 of the space 1fr
  314. 2fr + 1.5fr + 1fr = 4.5fr total therefore, now

    1fr = 2/9ths of the space 2fr 1fr 1.5fr
  315. 2fr 1fr 50px 1fr min-content

  316. 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; }
  317. Comma , or not to comma?

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

  319. None
  320. ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); grid-gap: 0.25rem;

    }
  321. 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; }
  322. auto-fi t auto-fi ll

  323. gridbyexample.com/video/series-auto-fill-auto-fit

  324. None
  325. Options for grid-template-columns grid-template-rows

  326. .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;
  327. 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
  328. ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); grid-gap: 0.25rem;

    // nothing about rows } li { // nothing needed }
  329. explicit vs. implicit

  330. You define !e size and/or number of rows and/or columns

    Let !e browser define number or size of rows or columns
  331. Place each "em 
 into a specific 
 cell or

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

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

    }
  336. 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) {…}
  337. .item { grid-row-start: 1; grid-row-end: 3; grid-column-start: 2; grid-column-end: 4;

    } .item { grid-row: 1 / 3; grid-column: 2 / 4; } .item { grid-area: 1 / 2 / 3 / 4; } 1 2 3 4 grid-column: 2 / 4; grid-row: 1 / 3; 1 2 3 4 5
  338. TRY IT OUT

  339. Exercises Set 1

  340. Exercises Set 1

  341. 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; Some bits for the Exercises
  342. Line Numbers

  343. 1 2 3 4 5 6 Grid Line Numbers Line

    Numbers, not track numbers — different than what we are used to! 1 2 3 4 5
  344. 1 6 6 lines 5 tracks 4 gaps 2 3

    4 5
  345. 1 2 3 4 5 6 grid-row: 1 / 2;

    grid-column: 1 / 2; grid-row: 1 / 2; grid-column: 5 / 6; grid-row: 2 / 3; grid-column: 2 / 4; grid-row: 3 / 5; grid-column: 3 / 5; 1 2 3 4 5 grid-row: 4 / 5; grid-column: 1 / 2;
  346. .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; } 1 2 3 4 grid-row: 1 / 3; grid-column: 2 / 4; 1 2 3 4 5 grid-row: 4 / 5; grid-column: 1 / 2; grid-row: 4; grid-column: 3;
  347. .item { grid-area: 1 / 2 / 3 / 4;

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

    } 1 2 3 4 1 2 3 4 5 first second third fourth
  349. None
  350. .item { grid-area: 1 / 2 / 3 / 4;

    } .item-B { grid-area: 4 / 1; } 1 2 3 4 1 2 3 4 5 first second third fourth
  351. ul { display: grid; grid-template-columns: 4fr 2fr 2fr 3fr 6fr;

    }
  352. None
  353. 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; }
  354. 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; }
  355. 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 3 4 5 1 2
  356. .grid-item { grid-column: 1 / 5; // goes from vertical

    line 1 to 5 grid-row: 3 / 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;
  357. TRY IT OUT

  358. Exercises Set 2

  359. 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; Some bits for the Exercises
  360. Line Numbers

  361. Grid Line Numbers 1 2 3 4 5 6 -5

    -4 -3 -2 -1 -6 -5 -4 -3 -2 -1 1 2 3 4 5
  362. 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; }
  363. Grid Auto Flow

  364. 15 16 17 12 4 3 13 11 8 9

    10 6 5 1 2 auto placement algorithm 7 14 .container {grid-auto-flow: row;}
  365. 15 10 6 2 14 7 16 17 12 4

    3 13 11 8 9 5 1 grid-auto-flow: column;
  366. Grid Justify 1 4 5 2 3 6 8 7

    9 writing-mode: horizontal-tb; grid-auto-flow: column; Align
  367. Row Column writing-mode: horizontal-tb;

  368. Column Row writing-mode: vertical-*;

  369. 15 10 6 2 14 7 16 17 12 4

    3 13 11 8 9 5 1 grid-auto-flow: column; writing-mode: horizontal-tb;
  370. 15 16 17 12 4 3 13 11 8 9

    10 6 5 1 2 7 14 grid-auto-flow: row; writing-mode: horizontal-tb;
  371. 11 8 9 10 7 6 5 1 2 3

    4 grid-auto-flow: row; grid-column: span 2; grid-row: span 2; grid-column: span 2; grid-row: span 2; grid-column: span 2;
  372. 13 11 8 9 10 7 6 5 1 2

    3 4 12 grid-auto-flow: dense;
  373. grid-auto-flow: row; grid-auto-flow: column; grid-auto-flow: dense; grid-auto-flow: row dense; grid-auto-flow:

    column dense;
  374. None
  375. None
  376. None
  377. TRY IT OUT

  378. Exercises Set 3

  379. 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; Some bits for the Exercises
  380. Named Lines

  381. .container { grid-template-rows: 1fr 1fr 1fr; }

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

  383. 1 2 3 4 1 2 3 4 5 cow

    horse dog pig .container { grid-template-rows:[cow] 1fr [horse] 1fr [dog] 1fr [pig]; } .item { grid-row: 3; grid-column: horse / pig; }
  384. 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);
  385. .container { grid-template-rows:[main-start] 1fr [main-end]; }

  386. Grid Areas

  387. Grid Area Grid Line Grid Track Grid Track Grid Cell

    Grid Line Grid Line Grid Line Grid Line
  388. <body> <header>…</header> <main>…</main> <aside>…</aside> <footer>…</footer> </body> ~25% ~75%

  389. header { grid-area: header; } main { grid-area: content; }

    aside { grid-area: sidebar; } footer { grid-area: footer; } ‘header’ ‘sidebar’ ‘content’ ‘footer’
  390. header { grid-area: header; } main { grid-area: main; }

    aside { grid-area: aside; } footer { grid-area: footer; } body { display: grid; grid-template-columns: 3fr 1fr; grid-gap: 2rem; grid-template-areas: "header header" "content sidebar" "footer footer"; } ‘header’ ‘aside’ 1fr ‘main’ 3fr ‘footer’
  391. 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"; } }
  392. None
  393. Media Query

  394. @media (min-width: 800px) { // something that happens once the

    // browser window is wider than 800px }
  395. // Default layout for skinniest devices @media (min-width: 800px) {

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

    the // browser window is narrower than 800px }
  397. @media (max-width: 300px) { … } @media (min-width: 300px) and

    (max-width: 800px) { … } @media (min-width: 800px) { … }
  398. @media (min-height: 600px) { … }

  399. None
  400. Explicit Grid vs Implicit Grid

  401. by Manuel Rego Casasnovas http://blogs.igalia.com/mrego/2016/02/01/deep-dive-into-grid-layout-placement/

  402. display: flow-root;

  403. None
  404. None
  405. None
  406. None
  407. None
  408. None
  409. None
  410. None
  411. Flexbox as intended

  412. None
  413. flex: initial; (do not grow, do shrink) flex: auto; (grow

    and shrink) flex: none; (do not grow or shrink) flex: <#>; (distribute space by portions) flex: 0 1 auto; flex: 1 1 auto; flex: 0 0 auto; flex: <#> 1 0;
  414. None
  415. Multicolumn

  416. None
  417. None
  418. article { max-width: 500px; margin: 0 auto; }

  419. article { column-count: 2; column-gap: 2em; }

  420. None
  421. article { // column-count: 2; column-width: 200px; column-gap: 2em; }

  422. None
  423. None
  424. img { width: 100%; } article { column-width: 200px; column-gap:

    2em; column-rule: 
 1px solid #444; }
  425. None
  426. THE END