CSS3 Grids and Regions

Presented at The CSS Summit, July 2013

Transcript

1. The CSS Summit, July 2013
   Rachel Andrew
   @rachelandrew
   CSS3 Grids &
   Regions
   

   View Slide

2. We need designed for purpose layout tools!
   Floats, positioning, display: table,
   display: inline-block
   CSS for Layout
   

   View Slide

3. W3C Working Draft, 2nd April 2013
   http://www.w3.org/TR/css3-grid-layout/
   CSS
   Grid Layout
   

   View Slide

4. http://www.flickr.com/photos/adactio/1799953270
   

   View Slide

5. 7th April 2011
   First public draft
   History of CSS
   Grid Layout
   

   View Slide

6. http://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/
   

   View Slide

7. 2 April 2013
   Current Working Draft
   CSS Grid Layout
   

   View Slide

8. http://www.w3.org/TR/css3-grid-layout/
   

   View Slide

9. Define a grid using
   the new grid and
   inline-grid values of
   the display property.
   .wrapper {
   display: grid;
   }
   Grid Layout
   

   View Slide

10. The grid-definition-
    columns property
    defines the grid
    columns; grid-
    definition-rows the
    grid rows.
    .wrapper {
    display: grid;
    grid-definition-columns: 200px 20px auto 20px 200px;
    grid-definition-rows: auto 1fr;
    }
    Grid Layout
    

    View Slide

11. I have declared a
    grid on the wrapper
    so the children need
    to be positioned.
    
    
    
    
    
    
    Grid Layout
    

    View Slide

12. grid-start and grid-
    end set the column
    position; grid-before
    and grid-after the
    row.
    .content {
    grid-start: 3;
    grid-end: 4;
    grid-before: 2;
    grid-after: 3;
    }
    Grid Layout
    

    View Slide

13. Columns used as
    gutters still count as
    a column, when
    positioning items.
    .mainnav {
    grid-start: 1; grid-end:2;
    grid-before: 2; grid-after: 3;
    }
    .title {
    grid-start: 3; grid-end: 4;
    grid-before: 1; grid-after: 2;
    }
    .quote {
    grid-start: 5; grid-end:6;
    grid-before: 2; grid-after: 3;
    }
    Grid Layout
    

    View Slide

14. When we place an
    item we declare the
    grid lines that
    contain it.
    .content {
    grid-start: 3;
    grid-end: 4;
    grid-before: 2;
    grid-after: 3;
    }
    Grid Layout
    

    View Slide

15. When we place an
    item we declare the
    grid lines that
    contain it.
    .content {
    grid-start: 3;
    grid-end: 4;
    grid-before: 2;
    grid-after: 3;
    }
    Grid Layout
    

    View Slide

16. When we place an
    item we declare the
    grid lines that
    contain it.
    .content {
    grid-start: 3;
    grid-end: 4;
    grid-before: 2;
    grid-after: 3;
    }
    Grid Layout
    

    View Slide

17. When we place an
    item we declare the
    grid lines that
    contain it.
    .content {
    grid-start: 3;
    grid-end: 4;
    grid-before: 2;
    grid-after: 3;
    }
    Grid Layout
    

    View Slide

18. When we place an
    item we declare the
    grid lines that
    contain it.
    .content {
    grid-start: 3;
    grid-end: 4;
    grid-before: 2;
    grid-after: 3;
    }
    Grid Layout
    

    View Slide

19. We can also declare
    named grid lines.
    .wrapper {
    display: grid;
    grid-definition-columns: “nav” 200px
    “gutter” 20px
    “main” auto
    “gutter” 20px
    “sidebar” 200px;
    grid-definition-rows: “header” auto “content” 1fr
    “content-end”;
    }
    Grid Layout
    

    View Slide

20. You then use the
    name rather than the
    number to place the
    content.
    .content {
    grid-start: "main';
    grid-end: span 1;
    grid-before: "content";
    grid-after: span 1;
    }
    Grid Layout
    

    View Slide

21. It will also be
    possible to declare a
    Grid template.
    .wrapper {
    display: grid;
    grid-definition-columns: 200px 20px auto 20px 200px;
    grid-definition-rows: auto 1fr;
    grid-template: "header header header header header"
    "nav . content . sidebar"
    }
    Grid Layout
    

    View Slide

22. With a template
    defined you can
    more simply target
    areas of the
    template.
    .content {
    grid-area: content;
    }
    Grid Layout
    

    View Slide

23. New proposals
    CSS Grid Layout
    

    View Slide

24. http://lists.w3.org/Archives/Public/www-style/2013May/0077.html
    

    View Slide

25. Based on the earlier Draft
    IE10 Implementation
    CSS Grid Layout
    

    View Slide

26. Defining a grid in the
    IE10
    implementation.
    .wrapper {
    display: -ms-grid;
    -ms-grid-columns: 200px 20px auto 20px 200px;
    -ms-grid-rows: auto 1fr;
    }
    Grid Layout
    

    View Slide

27. The grid-column and
    grid-row properties
    are used differently
    in the new Working
    Draft. This is how to
    position grid items in
    IE10.
    .mainnav {
    -ms-grid-column: 1;
    -ms-grid-row: 2;
    }
    .title {
    -ms-grid-row: 1;
    -ms-grid-column:3;
    }
    .content {
    -ms-grid-column: 3;
    -ms-grid-row: 2;
    }
    .quote {
    -ms-grid-column: 5;
    -ms-grid-row: 2;
    }
    Grid Layout
    

    View Slide

28. The IE10
    implementation
    specifies the row and
    column, rather than
    the lines around.
    .content {
    grid-start: 3;
    grid-end: 4;
    grid-before: 2;
    grid-after: 3;
    }
    Grid Layout
    

    View Slide

29. The IE10
    implementation
    specifies the row and
    column, rather than
    the lines around.
    Grid Layout .content {
    -ms-grid-column: 3;
    -ms-grid-row: 2;
    }
    

    View Slide

30. http://codepen.io/rachelandrew/pen/sFhmx
    

    View Slide

31. http://caniuse.com/#feat=css-grid
    

    View Slide

32. Giving Content Priority with CSS Grid Layout - http://24ways.org/2012/
    css3-grid-layout/
    My Grid examples on CodePen - http://codepen.io/rachelandrew/tag/
    24%20ways
    CSS Grid Layout - what has changed? - http://www.rachelandrew.co.uk/
    archives/2013/04/10/css-grid-layout---what-has-changed/
    Named Lines and Grid areas - http://www.rachelandrew.co.uk/archives/
    2013/04/29/css-grid-layout-named-grid-lines-and-areas/
    My Grid Resources
    

    View Slide

33. Test Drive Grid (IE10 implementation) - http://ie.microsoft.com/
    testdrive/graphics/hands-on-css3/hands-on_grid.htm
    Using CSS Grid Layout to build a game - http://www.sitepoint.com/
    using-css-grid-layout-and-blend-5-to-build-a-game/
    CSS Grid Layout Overhaul, comments needed! - http://www.css3.info/
    css-grid-layout-overhaul-comments-needed/
    IE10 implementation Polyfill - https://github.com/codler/Grid-Layout-
    Polyfill
    More resources
    

    View Slide

34. W3C Working Draft, 28th May 2013
    http://www.w3.org/TR/css3-regions/
    CSS Regions
    

    View Slide

35. http://html.adobe.com/webplatform/layout/regions/
    

    View Slide

36. http://blogs.adobe.com/cantrell/archives/2012/07/all-about-chrome-flags.html
    

    View Slide

37. My content is inside
    the article element.
    
    ...
    
    
    
    
    
    
    
    
    Regions
    

    View Slide

38. The CSS property
    flow-into has a value
    of the name you
    choose for this
    content.
    .main {
    flow-into: article-thread;
    }
    Regions
    

    View Slide

39. The property flow-
    from sets where this
    content thread
    should flow from.
    .article-regions {
    flow-from: article-thread;
    }
    Regions
    

    View Slide

40. Once the content
    reaches a height of
    6em it will have to
    flow into the next
    region.
    .region1 {
    height: 6em;
    margin: 0 0 1em 0;
    }
    Regions
    

    View Slide

41. The positioning of
    the regions can use
    any CSS layout
    method you like.
    .regionwrapper {
    display: flex; flex-direction: row;
    }
    .region2 {
    flex: 1; padding: 0.8em; height: 10em; border-right: 1px
    dotted #ccc;
    }
    .region3 {
    flex: 1; padding: 0.8em; height: 10em; border-right: 1px
    dotted #ccc; background-color: rgb(255,255,255);
    }
    .region4 {
    flex: 1; padding: 0.8em; height: 10em;
    }
    Regions
    

    View Slide

42. A height of auto on a
    region means it will
    expand to take
    whatever content is
    there. A fixed height
    means once that
    height is reached the
    content moves onto
    the next region.
    .region5 {
    padding: 1em 0 0 0;
    margin: 1em 0 0 0;
    border-top: 1px dotted #ccc;
    height: auto;
    }
    Regions
    

    View Slide

43. Regions do not have
    to be adjacent.
    
    
    alt="a cabbage" />
    
    
    Regions
    

    View Slide

44. http://adobe.github.io/web-platform/utilities/css-regions-support-matrix/
    

    View Slide

45. I have created a
    separate HTML
    document to store
    my content.
    
    
    
    
    Regions content
    href="common.css" />
    
    
    ...
    
    
    Regions
    

    View Slide

46. On the page that will
    display the content, I
    have an iframe with
    an ID, and also the
    empty regions into
    which content will
    flow.
    
    iframe>
    
    
    
    
    
    
    
    Regions
    

    View Slide

47. The flow-into
    property on the
    iframe ID causes the
    iframe to disappear.
    #regions-content {
    -ms-flow-into: article-thread;
    }
    Regions
    

    View Slide

48. We then flow-into
    the regions as
    before.
    .article-regions {
    -ms-flow-from: article-thread;
    }
    Regions
    

    View Slide

49. Regions can be
    positioned using any
    method - here I am
    using the IE10 Grid
    Layout
    implementation.
    .regionwrapper {
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr 1fr;
    -ms-grid-rows: 10em 10em auto;
    }
    .region1 {
    margin: 0 0 1em 0;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    -ms-grid-column-span: 3;
    }
    Regions
    

    View Slide

50. Edit the grid
    definition to change
    height of rows to
    adjust content flow.
    .regionwrapper {
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr 1fr;
    -ms-grid-rows: 10em 6em auto;
    }
    Regions
    

    View Slide

51. Using CSS Regions to flow content through a layout - http://
    docs.webplatform.org/wiki/css/tutorials/css-regions
    Say hello to CSS Regions Polyfill - http://corlan.org/2013/02/08/say-
    hello-to-css-regions-polyfill/
    CSS Regions examples on CodePen from Adobe - http://codepen.io/
    collection/jabto
    An Introduction to CSS Regions - http://dev.opera.com/articles/view/an-
    introduction-to-css-regions/
    WebPlatform.org CSS Regions - http://docs.webplatform.org/wiki/
    tutorials/css-regions
    Regions Resources
    

    View Slide

52. W3C Working Draft, 28th May 2013
    http://www.w3.org/TR/css3-exclusions/
    CSS Exclusions
    

    View Slide

53. Defines the wrap-flow and wrap-through properties.
    Allow you to wrap text around elements
    that are not floated.
    Exclusions
    

    View Slide

54. 
    
    ...
    
    alt="A cabbage" />
    
    Exclusions
    

    View Slide

55. Positioning the
    exclusion can be
    done with any
    positioning method.
    .exclusion {
    height: 160px;
    width: 200px;
    padding: 10px;
    position: absolute;
    top: 120px;
    left: 120px;
    }
    Exclusions
    

    View Slide

56. The wrap-flow
    property makes the
    text flow round the
    exclusion.
    .exclusion {
    height: 160px;
    width: 200px;
    padding: 10px;
    position: absolute;
    top: 120px;
    left: 120px;
    wrap-flow:both;
    }
    Exclusions
    

    View Slide

57. http://adobe.github.io/web-platform/utilities/css-exclusions-support-matrix/
    

    View Slide

58. Wrap-flow and CSS Exclusions - http://advent2012.digitpaint.nl/21/
    Adobe post on separation of the Shapes and Exclusions specs - http://
    blogs.adobe.com/webplatform/2013/06/04/how-to-make-a-chocolate-
    peanut-butter-cup/
    -ms-wrap-flow information on using wrap-flow in IE10 - http://
    msdn.microsoft.com/en-us/library/windows/apps/hh767314.aspx
    Exclusions Resources
    

    View Slide

59. W3C Working Draft, 20th June 2013
    http://www.w3.org/TR/css-shapes/
    CSS Shapes
    

    View Slide

60. Current draft defines shape-outside, and allows shapes only on floats.
    Wrap content around and inside things
    that are not rectangles.
    CSS Shapes
    

    View Slide

61. http://adobe.github.io/web-platform/samples/css-exclusions/nevermore/index.html
    

    View Slide

62. http://codepen.io/adobe/pen/KJisf
    

    View Slide

63. http://betravis.github.io/shape-tools/polygon-drawing/
    

    View Slide

64. http://betravis.github.io/shape-tools/polygon-drawing/
    

    View Slide

65. Experimenting with CSS Exclusions (actually covers Shapes) - http://
    blog.digitalbackcountry.com/2012/03/experimenting-with-css-exclusions/
    Shapes examples on CodePen from Adobe - http://codepen.io/
    collection/qFesk
    CSS Shape Tools - http://betravis.github.io/shape-tools
    Shapes Resources
    

    View Slide

66. While specs are at an early stage your
    opinion can change things.
    Get involved with
    new specs!
    http://lists.w3.org/Archives/Public/www-style/
    

    View Slide

67. http://rachelandrew.co.uk/presentations/new-css-layout
    @rachelandrew
    rachelandrew.co.uk
    edgeofmyseat.com
    grabaperch.com
    Thank you!
    

    View Slide