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

Frontend Conf Zurich: CSS Grid Layout

Frontend Conf Zurich: CSS Grid Layout

An updated version of this presentation for Frontend Conference in Zurich.

Rachel Andrew

August 29, 2014
Tweet

More Decks by Rachel Andrew

Other Decks in Technology

Transcript

  1. CSS Grid Layout • First Public Draft April 2011 •

    Proposal developed by Microsoft • Early implementation in IE10 • Spec has moved on. Is now very different to the IE10 implementation. • Latest Working Draft 13 May 2014 • Implementation in Chrome (Experimental) Friday, 29 August 14
  2. Line based positioning with CSS3 Grid Layout. <h1 class="title">...</h1> <article

    class="wrapper"> <nav class="mainnav"> </nav> <h2 class="subhead"> </h2> <div class="content"> ... </div> <blockquote class="quote"> ... </blockquote> </article> Friday, 29 August 14
  3. Grid Layout gives us new values for the display property.

    To start using grid, define a grid on the container. .wrapper { display: grid; } Friday, 29 August 14
  4. Declare the columns with grid-template- columns. The rows with grid-template-

    rows. .wrapper { display: grid; grid-template-columns: 200px 40px auto 40px 200px; grid-template-rows: auto; } Friday, 29 August 14
  5. Grid lines can be explict or implicit • Explicit grid

    lines are those that you specify and give sizing information to • Implicit lines are created when you place something into a row or column you have not specified with grid-template-rows or grid- template-columns Friday, 29 August 14
  6. grid-column- start is the line before the content. grid-column-end the

    line after. grid-row-start is the line above the content. grid-row-end the line below. .content { grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; } Friday, 29 August 14
  7. Dropping the other items into place on the grid. .mainnav

    { grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 3; } .subhead { grid-row-start: 1; grid-row-end:2; grid-column-start: 3; grid-column-end: 4; } .quote { grid-column-start: 5; grid-column-end: 6; grid-row-start: 2; grid-row-end: 3; } Friday, 29 August 14
  8. For columns start is the line before the column, end

    the line after. For rows start is the line above, and end the row below. .content { grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; } Friday, 29 August 14
  9. Adding a footer to the bottom of my design. .mainfooter

    { grid-column-start: 1; grid-column-end: 6; grid-row-start: 3; grid-row-end: 4; } Friday, 29 August 14
  10. The grid-row and grid-column properties allow you to declare the

    start and end values separated by a / character. .content { grid-column: 3 / 4; grid-row: 2 / 3; } Friday, 29 August 14
  11. The grid-area property lets us set all 4 values at

    once. The order of the values is: - grid-row-start - grid-column-start - grid-row-end - grid-column-end .content { grid-area: 2 / 3 / 3 / 4; } Friday, 29 August 14
  12. Grid line placement properties. .content { grid-column-start: 3; grid-column-end: 4;

    grid-row-start: 2; grid-row-end: 3; } .mainnav { grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 3; } .subhead { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end:2; } .quote { grid-column-start: 5; grid-column-end: 6; grid-row-start: 2; grid-row-end: 3; } Friday, 29 August 14
  13. Grid line placement properties. .content { grid-column: 3 / 4;

    grid-row: 2 / 3; } .mainnav { grid-column: 1 / 2; grid-row: 2 / 3; } .subhead { grid-column: 3 / 4; grid-row: 1 / 2; } .quote { grid-column: 5 / 6; grid-row: 2 / 3; } Friday, 29 August 14
  14. Grid line placement properties. .content { grid-area: 2 / 3

    / 3 / 4; } .mainnav { grid-area: 2 / 1 / 3 / 2; } .subhead { grid-area: 1 / 3 / 2 / 4; } .quote { grid-area: 2 / 5 / 3 / 6; } Friday, 29 August 14
  15. The source order of our html elements is: - mainnav

    - subhead - content - quote <article class="wrapper"> <nav class="mainnav"></nav> <h2 class="subhead"></h2> <div class="content"></div> <blockquote class="quote"> </blockquote> </article> Friday, 29 August 14
  16. Declare the grid at the 460 pixel breakpoint. @media only

    screen and (min-width: 460px) { .wrapper { display: grid; grid-template-columns: auto ; grid-template-rows: auto ; } } Friday, 29 August 14
  17. Within the media queries for that breakpoint, position the elements

    on the grid. I am using the shorthand grid- row property here to define start and end. .mainnav { grid-row: 1 / 2; } .subhead { grid-row: 2 / 3; } .quote { grid-row: 3 / 4; } .content { grid-row: 4 / 5; } Friday, 29 August 14
  18. Redefining the grid to two columns at the 700 pixel

    breakpoint. @media only screen and (min-width: 700px) { .wrapper { grid-template-columns: 20% 5% auto ; grid-template-rows: auto ; } Friday, 29 August 14
  19. In the two column version the nav goes into the

    left column. Between column lines 1 and 2. .mainnav { grid-column: 1 / 2; grid-row: 2 / 3; } .subhead { grid-column: 3 / 4; grid-row: 1 / 2; } .content { grid-column: 3 / 4; grid-row: 3 / 4; } .quote { grid-column: 3 / 4; grid-row: 2 / 3; } Friday, 29 August 14
  20. Redefining the layout as three columns again. @media only screen

    and (min-width: 980px) { .wrapper { grid-template-columns: 200px 40px auto 40px 200px; grid-template-rows: auto ; max-width: 960px; } Friday, 29 August 14
  21. In this layout the quote is placed between column lines

    5 and 6. .mainnav { grid-column: 1 / 2; grid-row: 2 / 3; } .subhead { grid-column: 3 / 4; grid-row: 1 / 2; } .content { grid-column: 3 / 4; grid-row: 2 / 3; } .quote { grid-column: 5 / 6; grid-row: 2 / 3; } Friday, 29 August 14
  22. Use the grid-area property to set up areas for the

    main elements outside of the media queries. .mainnav { grid-area: nav; } .subhead { grid-area: subhead; } .quote { grid-area: quote; } .content { grid-area: content; } .feature-image { grid-area: feature; } Friday, 29 August 14
  23. Give names to the areas using the grid- template-areas property.

    @media only screen and (min-width: 460px) and (max-width: 700px){ .wrapper { display: grid; width: 90%; grid-template-columns: auto ; grid-template-rows: auto ; grid-template-areas: "nav" "subhead" "quote" "content" "feature"; } } Friday, 29 August 14
  24. Redefine the areas for two columns. @media only screen and

    (min-width: 700px) and (max-width: 980px){ .wrapper { display:grid; grid-template-columns: 20% 5% auto ; grid-template-rows: auto ; grid-template-areas: ". . subhead" "nav . quote" "nav . feature" "nav . content" ; } } Friday, 29 August 14
  25. Redefine the areas for three columns. @media only screen and

    (min-width: 980px) { .wrapper { display: grid; grid-template-columns: 200px 40px auto 40px 200px; grid-template-rows: auto ; grid-template-areas: ". . subhead . ." "nav . feature . quote" "nav . content . quote"; } } Friday, 29 August 14
  26. Naming Grid lines. Remember that the name is for the

    line and NOT the column area. grid-template-columns: (nav-start) 200px (nav-end) 40px (content-start) auto (content-end) 40px (side-start) 200px (side-end); .content { grid-column: content-start / content-end; } Friday, 29 August 14
  27. You can use the repeat keyword to repeat parts of

    the grid definition. grid-template-columns: repeat(4, 200px 20px); Friday, 29 August 14
  28. The fr unit is a flexible length that represents a

    fraction of the available space in the grid container. grid-template-columns: 5fr 1fr 10fr 1fr 5fr; Friday, 29 August 14
  29. Creating a 16 column grid using the repeat syntax. I

    am also giving my grid lines names of col, row and gutter by adding a name for that line. .wrapper { display:grid; grid-template-columns: (gutter) 1fr repeat(16, (col) 4.25fr (gutter) 1fr ); grid-template-rows: repeat(9, (row) auto (gutter) 20px ); } Friday, 29 August 14
  30. We can create a bunch of boxes ... <div class="wrapper">

    <div class="box grid1">01</div> <div class="box grid2">02</div> <div class="box grid3">03</div> <div class="box grid4">04</div> <div class="box grid5">05</div> <div class="box grid6">06</div> ... </div> Friday, 29 August 14
  31. ... and position them on the grid. .grid1 { grid-column:

    col / span 1; grid-row: row / span 1;} .grid2 { grid-column: col 2 / span 1; grid-row: row / span 1;} .grid27 { grid-column: col 7 / span gutter 3; grid-row: row 3 / span 1; } .grid32 { grid-column: col 9 / span gutter 4; grid-row: row 4 / span 1; } Friday, 29 August 14
  32. The markup for my layout. <div class="wrapper"> <header class="header"> </header>

    <aside class="side1"> </aside> <article class="content"> </article> <aside class="side2"> </aside> <footer class="footer box"> </footer> </div> Friday, 29 August 14
  33. Using the span keywords to span across gutter lines. .header

    { grid-column: col / span gutter 16; grid-row: row / span 1; } .side1 { grid-column: col / span gutter 4; grid-row: row 2 / span 1; } .content { grid-column: col 5 / span gutter 8; grid-row: row 2 / span 1; } .side2 { grid-column: col 13 / span gutter 4; grid-row: row 2 / span 1; } .footer { grid-column: col / span gutter 16; grid-row: row 3 / span 1; } Friday, 29 August 14
  34. span gutter 16 means span over 16 lines named gutter.

    .header { grid-column: col / span gutter 16; grid-row: row / span 1; } .side1 { grid-column: col / span gutter 4; grid-row: row 2 / span 1; } .content { grid-column: col 5 / span gutter 8; grid-row: row 2 / span 1; } .side2 { grid-column: col 13 / span gutter 4; grid-row: row 2 / span 1; } .footer { grid-column: col / span gutter 16; grid-row: row 3 / span 1; } Friday, 29 August 14
  35. Our content starts on col line 5, and spans 8

    lines named gutter. .header { grid-column: col / span gutter 16; grid-row: row / span 1; } .side1 { grid-column: col / span gutter 4; grid-row: row 2 / span 1; } .content { grid-column: col 5 / span gutter 8; grid-row: row 2 / span 1; } .side2 { grid-column: col 13 / span gutter 4; grid-row: row 2 / span 1; } .footer { grid-column: col / span gutter 16; grid-row: row 3 / span 1; } Friday, 29 August 14