An Introduction to CSS Grid Layout

An Introduction to CSS Grid Layout

An introductory talk about the current W3C CSS Grid Layout Candidate Recommendation I held at the Frontend Meetup Rhein/Main in Frankfurt.

Here are the links from the presentation's sources:
https://www.w3.org/TR/css-grid-1/
http://gridbyexample.com/
https://css-tricks.com/snippets/css/complete-guide-grid/

E3a43e2c588568daf6e1c873449df6a0?s=128

Bastian Heist

January 24, 2017
Tweet

Transcript

  1. 2.

    Bastian Heist • Full-Stack Developer @ Sandstorm since 2015 •

    Neos CMS supporter since 2015 • Freelance Web Developer since 2009 • SAP ERP Consultant @ Merck, 2008-2015 @beheist
  2. 4.

    two-dimensional grid-based layout system, optimized for user interface design CSS

    Grid Layout Module Level 1 W3C Candidate Recommendation, 29 September 2016
  3. 7.

    Grid Container .container { display: grid; } <div class="container">
 <div

    class="item"> </div>
 <div class="item"> </div> </div>
  4. 9.

    Grid Item .container { display: grid; } <div class="container">
 <div

    class="item"> </div>
 <div class="item"> </div> </div> ? ? ?
  5. 11.
  6. 15.

    #container { display: grid; // 3 columns grid-template-columns: 1rem 1rem

    1rem; // 2 rows grid-template-rows: 1rem 1rem;
 } Defining a 3x2 Grid
  7. 16.

    #container { display: grid; grid-template-columns: [v0] 1rem [v1] 1rem [v2]

    1rem [v3]; grid-template-rows: [h0] 1rem [h1] 1rem [h2]; } Lines Can Be Named [h0] [h1] [h2] [v0] [v1] [v2] [v3]
  8. 17.

    #container { display: grid; grid-template-columns: [v0] 1rem [v1] 1rem [v2]

    1rem [v3]; grid-template-rows: [h0] 1rem [h1] 1rem [h2]; grid-template-areas: "top top top" "left . right"; } Areas Can Be Named, Too top left right
  9. 18.

    #container { display: grid; grid: [r0-start] "top top top" 1rem

    [r0-end] [r1-start] "left . right" 1rem [r1-end]; } Typing Sucks… top left right [r0-start] [r0-end] [r1-start] [r1-end]
  10. 20.

    <main id="container"> <header></header> <section></section> <aside></aside> </main> #container {…} #container header

    { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; } Arranging Items Between Lines <header></header> index starts at 1
  11. 21.

    <main id="container"> <header></header> <section></section> <aside></aside> </main> […] #container section {

    grid-column-start: v0; grid-column-end: v1; grid-row-start: h1; grid-row-end: h2; } Remember the Named Lines? [h0] [h1] [h2] [v0] [v1] [v2] [v3] <section>
  12. 22.

    <main id="container"> <header></header> <section></section> <aside></aside> </main> […] #container aside {

    grid-column: v2 / v3; grid-row: h1 / h2; } —— OR —— #container aside { grid-area: h1 / v2 / h3 / v3; } Shorthands! [h0] [h1] [h2] [v0] [v1] [v2] [v3] <aside>
  13. 23.

    […] #container header { grid-area: top; } #container section {

    grid-area: left; } #container aside { grid-area: right; } Align Items on Areas top left right
  14. 25.

    But Wait, There’s More! • Grid Gaps • Justify &

    Align Grid Items and Content • Auto-generated Columns & Rows • Subgrids • Auto Layout / Auto Flow (!)
  15. 33.
  16. 35.

    • W3C CSS Grid Layout Candidate Recommendation: https://www.w3.org/TR/css-grid-1/ • Grid

    Examples: http://gridbyexample.com/ • The Complete Guide To Grid: https://css-tricks.com/snippets/css/complete-guide-grid/ Sources & Resources