STATUS OF CSS GRID LAYOUT IMPLEMENTATION

Size: px

Start display at page:

Download "STATUS OF CSS GRID LAYOUT IMPLEMENTATION"

Melina Dina Fields
5 years ago
Views:

1 STATUS OF CSS GRID LAYOUT IMPLEMENTATION MANUEL REGO CASASNOVAS BlinkOn 6 / June 2016 (Munich)

2 ABOUT ME CSS Grid Layout implementor (Chromium/Blink & Safari/WebKit) Member of Igalia Web Platform Team

3 GRID CONCEPTS Header Aside Main Footer

4 GRID LINES Header 2 Aside Main 3 4 Footer

5 GRID TRACKS

6 GRID TRACKS ROWS Header Aside Main Footer

7 GRID TRACKS COLUMNS Header Aside Main Footer

8 GRID CELLS Header Aside Main Footer

9 GRID AREAS Header Aside Main Footer

10 IMPLEMENTATION STATUS

11 GRID CONTAINERS Property: display Values Status grid DONE inline-grid DONE subgrid TODO (at-risk) - #618969

12 GRID ITEMS Properties Status order DONE z-index DONE min-size: auto DONE

13 EXPLICIT GRID (I) Properties: grid-template-columns rows Values Status auto, length, percentage DONE flex (frunit) DONE min-contet, max-content DONE minmax() DONE fit-content() TODO - #618972

14 EXPLICIT GRID (I) - EXAMPLE <div class="grid"> <div class="a">a</div> <div class="b">b</div> <div class="c">c</div> <div class="d">d</div> </div> A B C D.grid { display: grid; grid-template-columns: ; grid-template-rows: ; }

15 EXPLICIT GRID (II) Properties: grid-template-columns rows Values/Features Status repeat(integer, ) DONE repeat(auto-fill, ) DONE repeat(auto-fit, ) WIP - # Multiple tracks TODO - #619930

16 EXPLICIT GRID (II) - EXAMPLE <div class="grid"> <div class="a">a</div> <div class="b">b</div> <div class="c">c</div> <div class="d">d</div> <div class="e">e</div> <div class="f">f</div> </div> A B C D E F.grid { display: grid; grid-template-columns: repeat(3, 100px) ; grid-template-rows: repeat(2, 100px) ; }

17 EXPLICIT GRID (III) Properties grid-template-areas grid-templateshorthand Status DONE DONE

18 EXPLICIT GRID (III) - EXAMPLE <div class="grid"> <div class="a">a</div> <div class="b">b</div> <div class="c">c</div> <div class="d">d</div> </div> A B C D.grid { display: grid; grid-auto-columns: 100px; grid-auto-rows: 75px; grid-template-areas: "head head" "nav main" "foot foot"; }.a { grid-area: head; }.b { grid-area: main; }.c { grid-area: nav; }.d { grid-area: foot; }

19 IMPLICIT GRID (I) Properties grid-auto-columns rows grid-auto-columns rowsmultiple tracks Status DONE TODO - #618970

20 IMPLICIT GRID (II) Properties Status grid-auto-flow DONE gridshorthand DONE gridshorthand new syntax TODO - #618971

21 PLACING GRID ITEMS (I) Properties: grid-column row-start end Values auto line name span Status DONE DONE DONE

22 PLACING GRID ITEMS (II) Properties/Features grid-column rowsshorthands grid-areashorthand Placement algorithm Status DONE DONE DONE

23 PLACING GRID ITEMS - EXAMPLE <div class="grid"> <div class="a">a</div> <div class="b">b</div> <div class="c">c</div> </div> A B C.grid { display: grid; grid: 100px 100px / 200px 200px; }.a { }

24 ABSOLUTE POSITIONING Features Status Placement DONE Alignment TODO - #603423

25 ABSOLUTE POSITIONING - EXAMPLE top: 80px; 3-0 left: 90px; position: absolute; grid-column: 1 / auto; grid-row: 2 / auto; bottom: 60px; right: 70px;

26 GUTTERS Properties/Values grid-column row-gaplength grid-column row-gap percentage grid-gapshorthand Status DONE WIP (at risk) - # DONE

27 GUTTERS - EXAMPLE <div class="grid"> <div class="a">a</div> <div class="b">b</div> <div class="c">c</div> <div class="d">d</div> <div class="e">e</div> </div> A B C D E.grid { display: grid; grid: 100px 100px / 100px 100px 100px; grid-row-gap: ; grid-column-gap: ; }

28 ALIGNMENT (I) Properties Status automargins DONE justify align-self DONE justify align-items DONE justify align-content DONE

29 ALIGNMENT (I) - EXAMPLE (I) <div class="grid"> <div class="a">a</div> <div class="b">b</div> <div class="c">c</div> </div> A B C.grid { display: grid; grid: 100px 100px / 200px 200px; align-items: ; justify-items: ; }.b { align-self: ; justify-self: ; }

30 ALIGNMENT (I) - EXAMPLE (II) <div class="grid"> <div class="a">a</div> <div class="b">b</div> <div class="c">c</div> </div> A B C.grid { display: grid; grid: 100px 100px / 150px 150px; align-content: ; justify-content: ; }

31 ALIGNMENT (II) Features Status normalvalue WIP - # Overflow alignment DONE Baseline alignment WIP - #412410

32 GRID SIZING Features Status Track sizing algorithm DONE Orthogonal flows support WIP - #445742

33 FRAGMENTATION Features Status Fragmentation algorithm TODO - #614667

34 SUBGRIDS

35 SUBGRIDS Nested Grid Subgrid A B C A B C D S Sub D Sub Sub E S Sub E Sub Sub

36 REDUCED PROPOSAL DISPLAY: SUBGRID; Track sizing definition from the parent grid (no grid-template-columns rows) Subgrids have no implicit grid (no grid-auto-columns rows) grid-template-areacan be used within the subgrid

37 SUBGRIDS - EXAMPLE <form><ul> <li><label>input</label><input></li> <li><label>checkbox</label><input ty <li><button>submit form</button></li </ul></form> Input Checkbox Submit form ul { display: grid; } li { display: grid; } label { grid-column: 1; }

38 PERFORMANCE Optimizations to avoid re-layout in some situations

39 W3C TEST SUITE Complete the test suite Currently 117 tests (most unreviewed) Import test suite once it's ready

40 CHROME DEVTOOLS Add grid layout support Ideas: show grid lines, highlight item's grid area, etc.

41 DISPLAY: CONTENTS; Avoid box generation Useful for other things (not only Grid Layout) Already supported on Firefox

42 SPEC STATUS

W3C SPECIFICATION CSS Grid Layout - https://dra s.csswg.

43 W3C SPECIFICATION CSS Grid Layout - s.csswg.org/css-grid/ Started by Microso in 2010 Last Working Dra 19 May 2016 W3C Test Suite

44 CAN I USE GRID?

45 BROWSERS ADOPTION Old implementation since IE 10 Getting ready Very close to Chrome Getting ready too Prefixed: -ms Experimental Web Platform Features Enabled by default on Safari Technology Preview layout.css.grid.enabled Polyfill:

46 EXAMPLES by Igalia by Rachel Andrew

47 ACKNOWLEDGEMENTS Igalia and Bloomberg working together to build a better web

THANK YOU! Twitter: @regocas Mail: rego@igalia.com Blog: http://blogs.

48 THANK YOU! Mail: Blog: Waldemar Merger

IDM 222. Web Design II. IDM 222: Web Authoring II 1

IDM 222. Web Design II. IDM 222: Web Authoring II 1 IDM 222 Web Design II IDM 222: Web Authoring II 1 Week 6 CSS Grid IDM 222: Web Authoring II 2 CSS Grid Layout (aka "Grid"), is a two-dimensional grid-based layout system that aims to do nothing less than