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

CSS Grid Layout

CSS Grid Layout

A quick fire presentation through some of the features of CSS Grid Layout as implemented in Chrome. This 20 minute presentation was for Responsive Day Out in Brighton, June 2014.

Rachel Andrew

June 27, 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, 27 June 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, 27 June 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, 27 June 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 1fr; } Friday, 27 June 14
  5. 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, 27 June 14
  6. 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, 27 June 14
  7. 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, 27 June 14
  8. 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 auto auto auto; } } Friday, 27 June 14
  9. 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, 27 June 14
  10. 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 auto auto; } Friday, 27 June 14
  11. 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, 27 June 14
  12. 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 auto; max-width: 960px; } Friday, 27 June 14
  13. 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, 27 June 14
  14. 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, 27 June 14
  15. 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 auto auto auto auto; grid-template-areas: "nav" "subhead" "quote" "content" "feature"; } } Friday, 27 June 14
  16. 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 auto auto auto; grid-template-areas: ". . subhead" "nav . quote" "nav . feature" "nav . content" ; } } Friday, 27 June 14
  17. 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 auto auto; grid-template-areas: ". . subhead . ." "nav . feature . quote" "nav . content . quote"; } } Friday, 27 June 14
  18. 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, 27 June 14
  19. 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, 27 June 14
  20. 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, 27 June 14
  21. span gutter 16 just 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, 27 June 14
  22. 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, 27 June 14