CSS Grid Layout. Implementation status and roadmap (Webkit Contributors Meeting April 2014)

CSS Grid LayoutImplementation status and roadmap

Javier Fernandez - [email protected] Contributors Meeting - 16-17 April 2014

CSS Grid Layout“allows authors to easily define complex, responsive 2-dimensionallayouts”

by Tab Atkins Jr. (Google)at CSS WG Blog

source: http://www.w3.org/blog/CSS/2014/01/23/css-grid-draft-updated/

CSS Grid Layout | Introduction

#igalia WK Contributors Meeting

In the past people abused the usage of tables toimplement grid based designs.Alternatives to tables were not easy to use. Problem offloating divs.Lots of CSS frameworks are emerging to ease thedevelopment.CSS Grid Layout is a powerful and flexible mechanismdefined by the W3C.

·

·

·

·

4/23

CSS Grid Layout | Introduction

#igalia WK Contributors Meeting 5/23

CSS Grid Layout | Introduction

#igalia WK Contributors Meeting

CSS Grid Layout provides amechanism to divide theavailable space in rowsand columns with a set ofpredictable sizingbehaviors.This defines a set of gridareas where designers canprecisely place theelements of a web page.The Grid Layout spec canbe used to intelligentlyreflow elements within aweb page optimizinglocations and sizesdepending on the devicewhere the page is

rendered in.

·

·

·

6/23

CSS Grid Layout | Concepts

#igalia WK Contributors Meeting

Grid lines are thehorizontal and verticaldividing lines of the grid.

·

7/23

CSS Grid Layout | Concepts

#igalia WK Contributors Meeting

Grid track is a generic termfor a grid column

.

·

8/23

CSS Grid Layout | Concepts

#igalia WK Contributors Meeting

Grid track is a generic termfor a gridrow.

·

9/23

CSS Grid Layout | Concepts

#igalia WK Contributors Meeting

Grid cell is the spacebetween two adjacent rowand two adjacent columngrid lines.

·

10/23

CSS Grid Layout | Concepts

#igalia WK Contributors Meeting

Grid area is the logicalspace used to lay out oneor more grid items. It isbound by four grid lines,one on each side of thegrid area.

·

11/23

CSS Grid Layout | Syntax

#igalia WK Contributors Meeting

.grid { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 100px 1fr auto; }

.title { grid-column: 1; grid-row: 1; } .menu { grid-column: 1; grid-row: 2 / span 2; } .main { grid-column: 2; grid-row: 1 / span 2; } .footer { grid-column: 2; grid-row: 3; }

CSS

display: grid: Defines a grid container.

grid-template-columns and grid-template-rows: Specify the track breadths.

grid-column and grid-row: Determine a grid item's size and location within the grid.

·

·

·

<div class="grid"> <div class="title">Title</div> <div class="menu">Menu</div> <div class="main">Main</div> <div class="footer">Footer</div> </div>

HTML

12/23

CSS Grid Layout | Track Breadths

#igalia WK Contributors Meeting

Options:·

lengthpercentageflex (fr - free space - unit)max-content

min-content

minmax(min, max)

auto

-

-

-

-

-

-

-

13/23

CSS Grid Layout | Flexible Track Breadths

#igalia WK Contributors Meeting

Flexible track breadths willgrow or shrink andautomatically adaptthemselves to viewportsize.

·

This allows to create verycustomized grids, definingflexible tracks withminimum and maximumbreadths depending ontheir contents or theavailable free space left bythe rest of tracks andviewport size.

·

14/23

CSS Grid Layout | Demo

#igalia WK Contributors Meeting 15/23

CSS Grid Layout | Areas & Alignment

#igalia WK Contributors Meeting

.grid { display: grid; grid-template-areas: "title title title social" "menu main main social" "menu main main social" "footer footer footer footer"; } .title { grid-area: title; align-self: center; justify-self: center; } .menu { grid-area: menu; align-self: start; } .main { grid-area: main; } .social { grid-area: social; align-self: end; justify-self: right; } .footer { grid-area: footer; align-self: start; }

CSS

grid-template-areas specifies named grid areas that can be referencedto position grid items.Follows CSS Box Alignment spec for alignment features.

·

·

16/23

CSS Grid Layout | Areas & Alignment

#igalia WK Contributors Meeting 17/23

CSS Grid Layout | Auto-placement

#igalia WK Contributors Meeting 18/23

CSS Grid Layout | Auto-placement

#igalia WK Contributors Meeting

form { display: grid; grid-auto-flow: row; } label { grid-column: 1; } input, textarea { grid-column: 2; } .controls { grid-column: 1 / span 2; }

CSS

Grid items can be positioned outside of the grid bounds. This causes thegrid container to generate implicit grid tracks, forming the implicit grid.grid-auto-flow controls the direction in which the grid items areautomatically placed.

·

·

19/23

CSS Grid Layout | Current status

#igalia WK Contributors Meeting

Spec (W3C Working Draft, 23 January 2014):http://www.w3.org/TR/css-grid-1/.Main browsers:

·

·

Already shipped in IE/Trident.Work in progress in Chromium/Blink (Google andIgalia) and Safari/WebKit (Igalia).Firefox/Gecko has plans to implement it but work hasnot started yet.

·

·

·

20/23

CSS Grid Layout | Status

#igalia WK Contributors Meeting

Done:

Work in progress:

·

Grid properties, named grid lines and named grid areassupported.Placement options, track breadths and layout grid items arealso implemented.

-

-

·

Alignment.Performance optimizations.Support for different writing modes.Selection.Subgrids (out of Working Draft for now).

-

-

-

-

-

21/23

Collaborations

#igalia WK Contributors Meeting

Bloomberg issponsoring our workin CSS Grid Layout.

·

22/23