How CSS Grid Changes Everything

D83926c323d4f9289f947b4b4e76b939?s=47 Jen Simmons
November 06, 2017

How CSS Grid Changes Everything

Presented at the W3C Developer meetup, San Francisco.

D83926c323d4f9289f947b4b4e76b939?s=128

Jen Simmons

November 06, 2017
Tweet

Transcript

  1. How CSS Grid Changes Everything (in 15 mins?) W3C Developer

    Meetup @jenSimmons
  2. Follow @jensimmons for slides

  3. Layout on the Web

  4. None
  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. photo by Brad Frost, 2012, CC BY 2.0

  24. None
  25. None
  26. None
  27. None
  28. The Official Timeline of Web Page Layout The No-Layout Layout

    Table-based Layouts Hand-coded Float Layouts Framework Layouts Amazing Future!
  29. 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
  30. This new CSS changes everything in web layout.

  31. labs.jensimmons.com

  32. None
  33. None
  34. None
  35. Grid makes it much easier to implement the same old

    layouts.
  36. Grid makes it possible to do layouts that were not

    possible before.
  37. Nature of CSS Grid

  38. explicit vs. implicit

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

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

    area Let !e browser place each "em using auto-placement algor"hm
  41. Rows *and* Columns

  42. ROWS!!!!!!!!!!!

  43. None
  44. None
  45. Tracks don’t have to all be the same size.

  46. None
  47. None
  48. Content sized by the size of a track.

  49. Tracks sized by the size of content.

  50. portion of available 
 space — 2 parts set by

    
 content size fixed portion of available 
 space — 1 part
  51. Grid Code

  52. None
  53. None
  54. Grid Container

  55. Grid Items

  56. <body> <header>…</header> <main> <article> <h1> <p> <p> <p> <figure> <p>

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

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

    </article> </main> <aside>…</aside> <footer>…</footer> </body> body { display: grid; } article { display: grid; }
  60. 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.
  61. 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.
  62. 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.
  63. 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.
  64. 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.
  65. labs.jensimmons.com

  66. Container Item Item Item

  67. Terminology

  68. Grid Container

  69. Grid Items

  70. Grid Line Grid Track Grid Track Grid Line Grid Line

    Grid Line Grid Line Grid Area Grid Cell
  71. Grid Line Grid Track Grid Line Grid Line Grid Line

    Grid Line Grid Gap Grid Gap Grid Gap Grid Track
  72. 4 Examples

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

  74. None
  75. <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>
  76. ul { display: grid; grid-template-columns: repeat(4, 100px); grid-gap: 4px; }

    li { // nothing }
  77. ul { display: grid; grid-template-columns: repeat(4, 100px); grid-gap: 4px; }

    li { // nothing }
  78. 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; }
  79. None
  80. 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; }
  81. None
  82. ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); grid-gap: 0.25rem;

    }
  83. None
  84. None
  85. nightly.mozilla.org

  86. ul { display: grid; grid-template-columns: repeat(4, 1fr); }

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

    }
  88. 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) {…}
  89. ‘fr’ unit

  90. .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;
  91. px em % pixels (or rem) percents 60px 10em 20%

  92. min-content max-content fr minmax()

  93. fr unit = “fraction”

  94. None
  95. 100% 33% 33% 33%

  96. 100% 33.33333% 33.33333% 33.33333%

  97. 100% 33.33333% 33.33333% 33.33333%

  98. 100% 33% 33% 33% 2% 2%

  99. 100% 32% 32% 32% 2% 2% 100% – 4% =

    96% = 32% 3 3
  100. 100% 31.333% 31.333% 31.333% 3% 3% 100% – 6% =

    94% = 31.333% 3 3
  101. 100% 31.666% 31.666% 31.666% 2.5% 2.5% 100% – 5% =

    95% = 31.666666666666666% 3 3
  102. .box { width: calc(100-(2*2em)/3)%;} 100% x% x% x% 2em 2em

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

  104. 1fr 1fr 1fr 2em 2em 1fr + 1fr + 1fr

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

    + 1fr = 4fr total therefore, now 1fr = 1/4 of the space 1fr 2em
  106. 100px 1fr 1fr 1fr 1fr 100px

  107. 2fr 1fr 50px 1fr min-content

  108. 6fr 2.4fr 1fr 2.4fr 2fr

  109. What about old browsers?

  110. None
  111. 6

  112. None
  113. You must support browsers that 
 do not understand 


    CSS Grid.
  114. @supports (foo: value) { // some CSS code here }

  115. // code for non-Grid browsers @supports (display: grid) { //

    undo some of the above // then do your Grid layout }
  116. hacks.mozilla.org/2016/08/using-feature-queries-in-css

  117. None
  118. 6

  119. You have two choices for 
 Internet Explorer (& old

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

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

  122. Autoprefixer

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

  125. None
  126. None
  127. None
  128. None
  129. None
  130. For more…

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

  132. developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout

  133. Modern Layouts: 
 Getting Out of Our Ruts Revolutionize Your

    Page: 
 Real Art Direction on the Web 2015 2016 available on jensimmons.com
  134. jensimmons.com @jensimmons layout.land labs.jensimmons.com Thanks!