Status of CSS Grid Layout Implementation (BlinkOn 6)

STATUS OF
CSS GRID LAYOUT
IMPLEMENTATION
MANUEL REGO CASASNOVAS ( )@regocas
BlinkOn 6 / 16-17 June 2016 (Munich)

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

GRID CONCEPTS
Header
MainAside
Footer

GRID LINES
Header
MainAside
Footer
1 2 3
1
2
3
4

GRID TRACKS
ROWS
Header
MainAside
Footer

GRID TRACKS
COLUMNS
Header
MainAside
Footer

GRID CELLS
Header
MainAside
Footer

GRID AREAS
Header
MainAside
Footer

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

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

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

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

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 -
#589460
#619930

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

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

EXPLICIT GRID (III) - EXAMPLE
A
B
C
D
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; }
<div class="grid">
</div>

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

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

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

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

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

ABSOLUTE POSITIONING
Features Status
Placement DONE
Alignment TODO - #603423

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

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

GUTTERS - EXAMPLE
A
B
C
D
E
grid: 100px 100px / 100px 100px 100px;
grid-row-gap: ; grid-column-gap: ; }
<div class="grid">
    <div class="e">E</div>
</div>

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

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

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

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

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

FRAGMENTATION
Features Status
Fragmentation algorithm TODO - #614667

SUBGRIDS
Nested Grid
A B C
D
E
S1 Sub2
S3 Sub4
Subgrid
A B C
D
E
Sub1 Sub2
Sub3 Sub4

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

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

PERFORMANCE
Optimizations to avoid re-layout in some situations

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

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

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

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

BROWSERS ADOPTION ὠ
Old
implementation
since IE 10
Prefixed: -ms
Getting ready ⚐Experimental Web Platform
Features
Very close to
Chrome
Enabled by default on Safari
Technology Preview
Getting ready too ⚐layout.css.grid.enabled
Polyfill: https://github.com/FremyCompany/css-grid-polyfill

EXAMPLES
by Igalia
by Rachel Andrew
http://igalia.github.io/css-grid-layout/
http://gridbyexample.com/

ACKNOWLEDGEMENTS
and working together to build a better webIgalia Bloomberg

© Waldemar Merger https://www.flickr.com/photos/paxx/5064768528/
THANK YOU!
Twitter:
Mail:
Blog:
@regocas
rego@igalia.com
http://blogs.igalia.com/mrego/

Status of CSS Grid Layout Implementation (BlinkOn 6)

Recommended

More Related Content

Similar to Status of CSS Grid Layout Implementation (BlinkOn 6) (20)

More from Igalia (20)

Recently uploaded (20)

Status of CSS Grid Layout Implementation (BlinkOn 6)