Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Sergio Vlllar Senln - lgalla
Blinl<On 3 — 4-5 NOV 20l4
About lgalia 8: me

lgalia is an Open Source consultancy founded in 2001
Maintainers of the WebKitGtk port
Member of lgali...
”a| |ows authors to easily define complex, 
responsive 2-dimensional | ayouts”

Tab Atkinsjr. 
Google
Motivation

- Grid based designs were first done using tables and
more recently floating divs

- Those approaches have iss...
Web Engines Adoption

almost complete (under experimental flag)
- chrome: //flags/ #enable-experimental-web—platform—featu...
ii LOGlN| S|GN. .. LONGFORM- VIDEO- REVIEWS- TECH- SCIENCE‘ CULTURE- DESIGN- BUSINE Q

US & WORLD .  FORUMS . 

This is th...
P. 
mv

. .m
0
m

1:1: Ill : |_-1llr: mm
ill 3:! 

gliuum:
M otivation
CSS Grid Layout Example

ALlCE'S ADVENTURES IN WONDERLAND

Chapters

F “ F AllC€ was liiegirinirig to get very...
Introduction
CSS Grid Layout

I I
I I

I
I I
I   ‘
I I
I I
I I
I I
Introduction
CSS Grid Layout

Mechanism to divide the
available space in rows and
columns
Introduction
CSS Grid Layout

Mechanism to divide the
available space in rows and
columns

Predictable sizing
behaviors
Introduction
CSS Grid Layout

Mechanism to divide the
available space in rows and
columns

Predictable sizing
behaviors

D...
Introduction
CSS Grid Layout

Mechanism to divide the

available space in rows and
columns

Predictable sizing
behaviors

...
Concepts I

Grid Lines

Grid lines are the horizontal
and vertical dividing lines oi
me grid
Concepts II
Grid Tracks

Grid track is a generic term
for a grid column or grid
row
Concepts III
Grid Cells

Grid cell is the space
between two adjacent row
and two adjacent column
grid lines
Concepts (and IV)

Grid Areas

Grid area is the logical
space used to lay out one or
more grid items.  It is bound
by four...
at How can I use it? 
CSS Grid Layout Syntax

,  .

'0.
4.

https: //flIc. kr/ p/cVIc5

J4
Syntax

Example:  Plain HTML

ALlCE‘S ADVENTURES IN WONDERLAND
Chapters

Ll:   rh:   I’ e 4 2

Alice was beginning to get ...
Syntax
Defining the grid

. grid l
display:  grid; 
grid—temo1ate—co1umns:  225px auto minmax(min—content.  9em}: 
grid'te...
Syntax

Track Breadths

~"x~‘mi 10px
. :ir: ~ : i—“itJ-gr:  25%
‘lee li1.“.0.5fr
r max-content
' min—content
'minmax(n‘ ‘ ...
Syntax
Example:  Defining the grid

ALlCE'S
ADVENTURES IN
WONDERLAND

C h a pte rs
+iViVVV: ,", V> VVilVl"ViT  tr ~ v

ma
...
x _,  U-.3

https: //flIc. kr'/ I‘: /'éjE: odi . —

 

. .
t . ; / -
Ez zx -
. _.. .
. _- ‘V; -,--, _
. ... .-- v-~. ... 
....
Positioning the items
Using longhands

. tit1e l
grid-row-start:  1;
grid—row—end:  2;
grid—co1umn—start:  2;
grid—co1umn'...
Positioning the items
Using shorthands

Using gr'id—row andgr1'd—co1umn

. tit1e -i
gr‘icl—I'ow:  1 ,5 2;
gricl-cotuiiviz ...
Positioning the items

ALICE'S ADVENTURES IN
WONDERLAND

Chapters Alice was beginning to get very tired of "Begirr or the ...
Can we make it easier? 
Named Grid Lines and Named Areas
Positioning the items
Named Grid Lines

. grid 1
display:  grid; 
grid—temp1ate—cotLmns:  (start first) 200px (middle) 200...
Positioning items

Grid Areas

. gric j
cisotayz gric: 
gric—temp1ate—areas:  " top top . 

" bar .  .”

" bar .  bottom":...
Positioning Items

Implicit Named Areas and Implicit Named Lines

. grid {
display:  grid; 
grid—template—areas:  "top top...
Responsive Design

Using ‘vied a Queries

Gmedia ‘OFTEWYEETOWI 30rtL3IC"

. grin I

7 gric—template—3res "title"
"links"
"...
Responsive Design

Using Media Queries

Title:  random stuff

Links Content

- Main This is some content that is
automatic...
Recent Developments
Alignmentjustification and Automatic Placement

https: //flIc. kr/ p/oNo72Z
Alignment &Justification

. ,,E"7' J‘, 
.1sD1ay:  grid: 
‘r' —tem31ate—area3: ”u‘: 

“T‘1'v7€

. ome { gr1d—area:  : a1ign—...
Au'i; omatic Placement
Setting up a typical form

form i
display:  grid: 
grid—auto—f1ow:  row: 
1,
I
label 1 gridvcolumw:...
Automatic Placement

Form created using a Grid and Automatic Placement

Name

Surname

Address

Mobile number

Email
l _  7
State of the Grid
3

.  2.1; Recent Changes,  Current Status and Roadmap  -

| ‘"' T

       

,  A  _
'= W‘= l‘‘“~...
State of the Grid

Changes since Blinl<On2

l/ loved grid position resolution to its own class
lwovedrxflnungcodetoitsomnid...
State of the Grid

Current status

Specs feature

Grid containers (display:  grid/1n1.1ne-grid)

Reordered grid items (ord...
State of the Grid

Current status (ll)

Implicit grid areas support Yes

Auto-generated rows&co| umns (grid-auto-rows and ...
State of the Grid

Current status (and Ill)

.1,-ma izfilllll: 

Absolutely positioned grid items

Grid item placement algo...
State of the Grid

Roadmap

- Subgrids (likely for Level 2)
Fragmentation (still under discussion inside CSSWG)

Performan...
L _ « ‘
V
l

aw ,  I‘.  14,. 

 A 

£. li , 
acking the Grid 3 ll 
‘  (1,,  RenderGrid and friends ’

htl:  I/ /501 . 

 
...
Hacking the Grid

Source Code Files

Mostofthecodeisincore/ rendering/ RenderGrid. cpp

- Track Sizing Algorithm
- Auu)Pmc...
Hacking the Grid

Source Code Files (and II)

Rendenngcode
rendering/ RenderGrid. cpp
rendering/ style/ GridCoordinate. h
...
Acknowledgements

0 igalia

Bloomberg

- Bloomberg is sponsoring our work in CSS Grid Layout
Thank You! 

iga| ia. com/ browsers

wvvw peop| e.igalia. com/ svi| |ar/
CSS Grid Layout. Specification overview. Implementation status and roadmap (BlinkOn 3 2014)
Nächste SlideShare
Wird geladen in …5
×

CSS Grid Layout. Specification overview. Implementation status and roadmap (BlinkOn 3 2014)

1.064 Aufrufe

Veröffentlicht am

By Sergio Villar Senin.

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

CSS Grid Layout. Specification overview. Implementation status and roadmap (BlinkOn 3 2014)

  1. 1. Sergio Vlllar Senln - lgalla Blinl<On 3 — 4-5 NOV 20l4
  2. 2. About lgalia 8: me lgalia is an Open Source consultancy founded in 2001 Maintainers of the WebKitGtk port Member of lgalia Web Engines Team - WebKit reviewer Blink committer - Current working on CSS Grid Layout
  3. 3. ”a| |ows authors to easily define complex, responsive 2-dimensional | ayouts” Tab Atkinsjr. Google
  4. 4. Motivation - Grid based designs were first done using tables and more recently floating divs - Those approaches have issues and a lot of complexity Lots of CSS frameworks emerging to make things easier - CSS Grid Layout is a powerful and flexible standard defined by the W3C Latest ED from 23 September 2014 O . i=i: ,:. «g'i: ,i trill lll~,2’l. :i :1 5‘, -2
  5. 5. Web Engines Adoption almost complete (under experimental flag) - chrome: //flags/ #enable-experimental-web—platform—features almost complete (released in Safari nightlies) very early stages (just some property parsing) outdated, based on very old version of the specs
  6. 6. ii LOGlN| S|GN. .. LONGFORM- VIDEO- REVIEWS- TECH- SCIENCE‘ CULTURE- DESIGN- BUSINE Q US & WORLD . FORUMS . This is the Fitbit Surge, a $250 'superwatch' with built-in GPS By Chris Watch 92 Tesla's autopilot isn't special (but it's still cool) By Chris Ziegler 85 Pascal Blanche is building a stunning sci-fi universe By Andrew Webster 13 The Verge Playlist: Brian Eno By Colin Lecher 21 'Birdman' review: a surreal and spectacular look at a superhero coming undone By Molly Osberg 20 I flew in the Red Bull Air Race and I didn't die By San O‘Kane 21 Microsoft to launch its wearable fitness band in coming weeks By Tom Wamen W
  7. 7. P. mv . .m 0 m 1:1: Ill : |_-1llr: mm ill 3:! gliuum:
  8. 8. M otivation CSS Grid Layout Example ALlCE'S ADVENTURES IN WONDERLAND Chapters F “ F AllC€ was liiegirinirig to get very tired of sitting by her 5‘)-9'7 (“ mg i"73”"7”75 . i. ‘i l‘? ’ ’ ’ ’ sister on the barik, and of having nothing to do: once ‘'’’'’‘'/ §O 0” U/ /V0“ (O"’: ’€ or twice she had peepecl into the book her sister was [0 my ‘j’"/7 W” gm/ J‘ ieaciliig, but it had no j-jictuies oi conveisatioiis in it. ‘and what is the use of a liiiiiok, ‘ thought Alice ‘without pictures or convei Sall(i)i’l‘3.7“ Lewis Carroll So she was coiislciei lng in her owii inincl (as well as she could, for the hot day made her feel very sleepy and E—. llll)l(. l), whether the pleasure of illdlxlllg a daisy- chain woiilcl be worth the trouble of getting up and picking the daisies, wlien siiilclenly a White Rabbit with pink e/ es ran close by her. From Project Gutenberg
  9. 9. Introduction CSS Grid Layout I I I I I I I I ‘ I I I I I I I I
  10. 10. Introduction CSS Grid Layout Mechanism to divide the available space in rows and columns
  11. 11. Introduction CSS Grid Layout Mechanism to divide the available space in rows and columns Predictable sizing behaviors
  12. 12. Introduction CSS Grid Layout Mechanism to divide the available space in rows and columns Predictable sizing behaviors Defines a set of grid areas where to precisely place elements of a web page
  13. 13. Introduction CSS Grid Layout Mechanism to divide the available space in rows and columns Predictable sizing behaviors Defines a set of grid areas where to precisely place elements of a web page Able to intelligently reflow elements optimizing locations and sizes
  14. 14. Concepts I Grid Lines Grid lines are the horizontal and vertical dividing lines oi me grid
  15. 15. Concepts II Grid Tracks Grid track is a generic term for a grid column or grid row
  16. 16. Concepts III Grid Cells Grid cell is the space between two adjacent row and two adjacent column grid lines
  17. 17. Concepts (and IV) Grid Areas Grid area is the logical space used to lay out one or more grid items. It is bound by four grid lines, one on each side of the grid area
  18. 18. at How can I use it? CSS Grid Layout Syntax , . '0. 4. https: //flIc. kr/ p/cVIc5 J4
  19. 19. Syntax Example: Plain HTML ALlCE‘S ADVENTURES IN WONDERLAND Chapters Ll: rh: I’ e 4 2 Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, ‘and what is the use of a book, ‘ thouglwt Alice ‘without pictures or conversationsi“ So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of rnaking a daisy—chain would be worth the trouble of getting up and picking the daisies, when sudclenly a White Rabbit with pink eyes ran close by her. "Beg/ Ir at the l)e_gr‘rIrr/ ‘rig mic/ go on till you come to the em: /,' then stop, “ Lewis Carroll From Project Gutenberg
  20. 20. Syntax Defining the grid . grid l display: grid; grid—temo1ate—co1umns: 225px auto minmax(min—content. 9em}: grid'tem3late—r0ws: auto auto auto; eciv ' "'—'gric“* (civ2ALICE'S ADVENTURES IN w0NDERLAND <civ>Cnapters ‘Lit’ <1i9Down the Rabbit-Holeiftis <ti2The Pool of Tearsaftie xfutv ‘/ VICITI V3 co*Begin at the beginning andcfo» *civ2Lewis Carrot1~fciv» ~rciu«
  21. 21. Syntax Track Breadths ~"x~‘mi 10px . :ir: ~ : i—“itJ-gr: 25% ‘lee li1.“.0.5fr r max-content ' min—content 'minmax(n‘ ‘ j ‘r 1') auto Everything is really a m1'nmax(min, max)
  22. 22. Syntax Example: Defining the grid ALlCE'S ADVENTURES IN WONDERLAND C h a pte rs +iViVVV: ,", V> VVilVl"ViT tr ~ v ma "SW1WW’liflsiliiri/ its From Project Gutenberg tint‘/ go on t/ //you come to the end, ‘ then stop. “ Lewis Carroll Alice was begi n n l rig to get very tired of sitting by her sister on the batik, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conver sations in it, ‘and what is the use of a book'
  23. 23. x _, U-.3 https: //flIc. kr'/ I‘: /'éjE: odi . — . . t . ; / - Ez zx - . _.. . . _- ‘V; -,--, _ . ... .-- v-~. ... .. .. .. . .._. .1--: ... . ~f_ = .m-. Q - . _.- I: -—-. ..- , .. .. ... .. , ... Vk— . . , .__. / .
  24. 24. Positioning the items Using longhands . tit1e l grid-row-start: 1; grid—row—end: 2; grid—co1umn—start: 2; grid—co1umn'edc: 3; I . nav I grid—row—start: 2; grid~row'eaC: 3; grid-column-start: l: grid—co1umn—enc: 2; —"griv“> : “title”>ALICE'S ADVENTURES IN wONDERLAND<§civ* , n '— "‘”2ChaDtEFS‘fGTv9
  25. 25. Positioning the items Using shorthands Using gr'id—row andgr1'd—co1umn . tit1e -i gr‘icl—I'ow: 1 ,5 2; gricl-cotuiiviz 2 3; l . -iav —l' griclvrow: 2 I 3; gI’Td—CO1Li| ii'1Z 1 2; Or using grid-area ’ - grid-area: 1 - gricl—area: 2
  26. 26. Positioning the items ALICE'S ADVENTURES IN WONDERLAND Chapters Alice was beginning to get very tired of "Begirr or the l, Jeg/ riri/ rig t/ ht/ go on C, ., W F, ., ,7 sitting by her sister on the bank, and of t/ //j/ on come to the erirl; then stop. ‘ ~. V _— __. V having nothing to do: once or twice she had i ' , peeped into the book her sister was LEWIS Carroll reading, but it had no pictures or coriver'sations in it, ‘and what is the use of a book, ‘ thought Alice ‘without pictures or conversations ,7’ So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasui e of making a claisy—charri would be worth the trouble of getting up and picking the daisies, when stidclenly a White Rabbit with pink eyes ran close by her. From Project Gutenberg
  27. 27. Can we make it easier? Named Grid Lines and Named Areas
  28. 28. Positioning the items Named Grid Lines . grid 1 display: grid; grid—temp1ate—cotLmns: (start first) 200px (middle) 200px (end last); ; , ~ gridvcotumnz start I ; grid-column: first 5
  29. 29. Positioning items Grid Areas . gric j cisotayz gric: gric—temp1ate—areas: " top top . " bar . .” " bar . bottom": II t cl . I)OI(’O'T€
  30. 30. Positioning Items Implicit Named Areas and Implicit Named Lines . grid { display: grid; grid—template—areas: "top top . " "bottom . ."; grid-template-rows: (line-start) 50px 100px (line-end); grid-template-columns: 50px 100px (line-start) 150px (line-end); I . red—box I grid—area: bottom: I . green-box { grid-area: line; I . .. I‘ I . blue-box { grid-column: bottom-start I top-end; grid-row: 1; } Exaiiip e grin
  31. 31. Responsive Design Using ‘vied a Queries Gmedia ‘OFTEWYEETOWI 30rtL3IC" . grin I 7 gric—template—3res "title" "links" "content" "footer": I. @media Iorieatatioa: l3WCLCjD6 I . gric I grin-template-areas: " . title . " "links content content" "links content content" " footer footer <div class: "grid"> <div class: ”title”></ div> </ divg.
  32. 32. Responsive Design Using Media Queries Title: random stuff Links Content - Main This is some content that is automatically shrunk or expanded depending on the available space. Resources Contact
  33. 33. Recent Developments Alignmentjustification and Automatic Placement https: //flIc. kr/ p/oNo72Z
  34. 34. Alignment &Justification . ,,E"7' J‘, .1sD1ay: grid: ‘r' —tem31ate—area3: ”u‘: “T‘1'v7€ . ome { gr1d—area: : a1ign—se1f: center: justfify—; e1f: .two { gr1d—area: ‘ : align—5elf: start: . three 1 grid—area: align*5e1f: ewc; . four { grid-area: alfign-Self: ewc; justfify-, e1f: Example grid
  35. 35. Au'i; omatic Placement Setting up a typical form form i display: grid: grid—auto—f1ow: row: 1, I label 1 gridvcolumw: input, textarea { grid-columw: nf0rm« «1aDe1>Namej13oe1v ‘iw0ut>ufiwout> <1aDe1>Surname‘5iaDe1> Fiwautzafinoutn «1aoe1>Address«f1aoe1> <textarea‘~ftext ‘laoeliflobile WLWDEF‘ inout ' r1aDe1>Emai1< “iwout ' e= "eH V ~fform>
  36. 36. Automatic Placement Form created using a Grid and Automatic Placement Name Surname Address Mobile number Email
  37. 37. l _ 7 State of the Grid 3 . 2.1; Recent Changes, Current Status and Roadmap - | ‘"' T , A _ '= W‘= l‘‘“~ 1)‘
  38. 38. State of the Grid Changes since Blinl<On2 l/ loved grid position resolution to its own class lwovedrxflnungcodetoitsomnidass Supportforspanrnngitenishigrkiautorflacenientaflgornhni Suppcwtforrntdupkernodesirigrmlautotflacenientaflgornhrn Hnprovedrnargnm paddingarmlbordersupport SupponforunphdtgndHnesandareas Suppomforjustify—items, justify—se1f, align—itemsand align-self Severalcornercase bugs detected bytruafuzzinator O fi. ,:, ,gi: l : sl, :i iilunii P‘ 9,:
  39. 39. State of the Grid Current status Specs feature Grid containers (display: grid/1n1.1ne-grid) Reordered grid items (order property) Explicit grid properties (grid-template-rows and grid-template-columns) Named grid lines repeat() syntax and flexible length (fr) support Subgrids Grid a reas support (grid-template-areas) 0 iscssgrid #blinkon3 #igalia
  40. 40. State of the Grid Current status (ll) Implicit grid areas support Yes Auto-generated rows&co| umns (grid-auto-rows and gr1d—auto-columns) Yes Auto-placement (grid-auto-flow) Yes Other shorthands (gr1d, gr1d-template) Yes Common patters in grid placement (named areas, numeric indexes, named lines. ..) Yes Grid line based placement Yes Placement shorthands (grid-column, gr1d-row and gr1d-area) Yes 0 #cssgrid #blinl<on3 aéigalia U1 (77 Ji- J>-
  41. 41. State of the Grid Current status (and Ill) .1,-ma izfilllll: Absolutely positioned grid items Grid item placement algorithm Column/ Row axis alignment (1 ust1 fy-self, justi fy-‘items, a'L1gn-self and align-items) Grid alignment (:1 usti fy-content and a'I.1gn-content) Z-axis ordering Track sizing algorithm Fragmentation {(15 iii‘! Partially 'l= l~‘ 'l= |~‘ Partially vl$ Van [[0-<i1:~l= l'i'iflll= llI XVII-‘(In ’ua.1_u: i4iil: u|
  42. 42. State of the Grid Roadmap - Subgrids (likely for Level 2) Fragmentation (still under discussion inside CSSWG) Performance optimizations (we need actual use cases) - Support for different writing modes l/ lore tests. Ongoing effort to create a W3C test suite - Selection Integrate Grid in DevTools (a. k.a. Weblnspector support) Rewrite the Track Sizing Algorithm 0 #: ,:, «g'i<, l €‘l, llllli«', Ill, :§ 2‘ gal
  43. 43. L _ « ‘ V l aw , I‘. 14,. A £. li , acking the Grid 3 ll ‘ (1,, RenderGrid and friends ’ htl: I/ /501 . _*}‘§ H
  44. 44. Hacking the Grid Source Code Files Mostofthecodeisincore/ rendering/ RenderGrid. cpp - Track Sizing Algorithm - Auu)PmcementAgondwn Parserandsnweresowercode css/ CSSComputedSty1eDec1aration. cpp css/ CSSGridLineNamesVa1ue. cpp css/ CSSGridTemp1ateAreasVa1ue. cpp css/ parser/ CSSPropertyParser. cpp css/ resolver/ Sty1eBuilderconverter. cpp css/ resolver/ Sty1eBuildercustom. cpp
  45. 45. Hacking the Grid Source Code Files (and II) Rendenngcode rendering/ RenderGrid. cpp rendering/ style/ GridCoordinate. h rendering/ style/ GridLength. h rendering/ style/ GridPosition. h rendering/ style/ GridReso1vedPosition. h rendering/ style/ GridTrackSize. h Paintnig code — paint/ GridPainter. cpp
  46. 46. Acknowledgements 0 igalia Bloomberg - Bloomberg is sponsoring our work in CSS Grid Layout
  47. 47. Thank You! iga| ia. com/ browsers wvvw peop| e.igalia. com/ svi| |ar/

×