CSS Grid Layout
in Blink
Javier Fernández García-Boente (@lajava77)
BlinkOn Winter 2015 / 10-11 November 2015 (San Francisco)
About Me
CSS Grid Layout implementor (Chromium/Blink & Safari/WebKit)
Member of Igalia Web Platform Team
Introduction to Grid
Basic Concepts
Grid Lines
Grid Tracks
Grid Tracks
Rows
Grid Tracks
Columns
Grid Cells
Grid Areas
Explicit and Implicit Grid
Defining grid tracks
<div class="grid">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
</div>
Defining grid areas
<div class="grid">
<div class="a">HEAD</div>
<div class="b">NAV</div>
<div class="c">MAIN</div>
<div class="d">FOOT</div>
</div>
Explicit tracks sizing
grid-template-columns & grid-template-rows
<div class="grid">
<div class="a">A A A</div>
<div class="b">B BB</div>
<div class="c">CC</div>
<div class="d">DDD</div>
</div>
Implicit tracks sizing
grid-auto-columns & grid-auto-rows
specifying the size of such implicitly-created tracks.
Implicit tracks sizing
<div class="grid">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
</div>
Alignment and Spacing
The CSS Box Alignment Specification
New parsing logic
justify-content & align-content
flex-start | flex-end | center | space-between | space-around
auto | <baseline-position> | <content-distribution> || [ <overflow-position>? && <content-position> ]
justify-self & align-self
flex-start | flex-end | center | baseline | stretch
auto | stretch | <baseline-position> | [ <overflow-position>? && <self-position> ]
Self Alignment
Controls alignment of the box within its containing block
The alignment container is the grid area
The alignment subject is the grid item's margin box
Self Alignment example
Content Alignment
Controls alignment of the box's content within the box.
The alignment container is the grid container's content box.
The alignment subjects are the grid tracks.
Content alignment example
Auto Margins Alignment
Grid gutters
grid-row-gap & grid-column-gap
Grid gutters example
Writing modes and direction
Current support an examples
Complete support for both, tracks sizing and alignment
Grid indexes are writing mode relative
Examples
<div class="grid">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
</div>
Orthogonal modes
Work in progress
New cicle in the track sizing algorithm
Alignment and positioning issues
Orthogonal modes example
<div class="grid">
<div class="a">A B C D</div>
</div>
The grid layout algorithm
Example
<div class="grid">
<div class="title">Title</div>
<div class="nav">Nav</div>
<div class="main">Lorem ipsum...</div>
<div class="aside">Ad</div>
<div class="aside">Adword</div>
</div>
.grid { display: grid;
width: 800px;
grid-template-columns: 200px 1fr auto;
grid-template-rows: 100px auto; }
.title { grid-row: 1; grid-column: 2; }
.nav { grid-row: 2; grid-column: 1; }
.main { grid-row: 2; grid-column: 2; }
.aside { grid-column: 3; }
First step: grid items placement
Creating the explicit and implicit tracks
Internal grid represtantion and items coordinates
Empty grid
Place items
Place items
Place items
Place items
Place items
Place items
Grid tracks sizing
At least 2 cicles, columns first and then rows
init -> intrinsic -> maximize -> flexible
Fixed column
Intrinsic column
Intrinsic column
Flexible column
Flexible column
Layout items
Fixed row
Intrinsic row
Intrinsic row
Grid tracks sizing
Content Alignment stretching
Tracks with auto max-sizing-function can be 'stretched'
Grid tracks positioning
Computing the tracks position based on their size
Basic data for alignment
Positions include Content Alignment offsets
Tracks gaps affect position as well
Grid area sizing
Virtual containing block of grid items
A grid item is sized based on its grid area
Gaps and Content Distribution affect grid area size
Grid items are aligned within their grid areas
Self Alignment: stretching
Forcing grid item's outer size to fill its grid area
Allowed only on auto sized items and no auto-margins
It has a notable impact on performance
Stretch items
Auto-margins alignment
Vertical and horizontal axis centering with auto margins
Alignment properties have no effect
Self alignment: positioning
Block and inline axis alignment within the grid area
No extra layout required
Support for different writing modes and direction
Grid Container block-axis sizing
grid rows track's base size and gutters
min/max logical height constrains applied later
State of the grid
Changes since last BlinkOn
Support for different writing modes
Better W3C Test Suite coverage
Auto-margins alignment
New track sizing algorithm implementation
Updates in the CSS synxtax
Track gutters
Absolute Positioned items
Enhanced auto-placement algorithm
Current status
Current status (II)
Testing coverage
More than 250 layout regression tests
9 tests for the new CSS Box Alignment syntax
14 repainting tests
3 performance tests
Bug reports
104 reported issues (flag Cr-Blink-Layout-Grid)
Still 40 open issues
CSS Grid Layout: In Development - Bug 79180
CSS Box Alignment: In Development - Bug 226252
It's the most advanced imlementation
Experimental Web Platform Features runtime flag
Julien Chaffraix <jchaffraix@chromium.org> Sergio Villar <svillar@igalia.com>
Christian Biesinger<cbiesinger@chromium.org>
Manuel Rego <rego@igalia.com> and Javier Fernandez <jfernandez@igalia.com>
CSS Grid Layout: In Development - Bug 60731
CSS Box Alignment: In Development - Bug 91512
Almost complete, pretty close to Chrome's implementation
Prefixed -webkit in Safari nightlies builds
Sergio Villar <svillar@igalia.com>
Manuel Rego <mrego@igalia.com> and Javier Fernandez <jfernandez@igalia.com>
CSS Grid Layout: In Development - Bug 616605
CSS Box Alignment: In Development - Bug 1105570
Good progress so far, but still behind
Available by default in nightlies
Behind layout.css.grid.enabled runtime flag
Daniel Holbert <dholbert@mozilla.com> and Mats Palmgren <mats@mozilla.com>
CSS Grid Layout: Already shipped - API Reference
CSS Box Alignment: No public signals
Prefixed -ms in IE 10+ and Microsoft Edge
Very old and oudated implementation of the spec
Active role in specification related discussions
Rossen Atanassov <Rossen.Atanassov@microsoft.com>
Greg Whitworth <gwhit@microsoft.com> and Peter Salas <psalas@microsoft.com>
State of the Specification
Currently Working Draft Level 1
Plans to move it forward to Last Call Wordking Draft
We are working on enhancing the W3C Test Suite
Web Developers Feedback
We have appreciated high expectations on the feature.
Rachel Andrew's examples site and recent talks
Manuel Rego's talks at CSS Conf and HTML5DevConf
Patrick Brosset's insights about web layout
Polyfill by François REMY
Acknowledgements
Thank You!
- Twitter: @lajava77
- Mail: jfernandez@igalia.com
- Blog: http://blogs.igalia.com/jfernandez/