CSS Grid Layout. Specification overview. Implementation status and roadmap (BlinkOn 2 2014)
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 1,887 views

By Manuel Rego.

By Manuel Rego.

Original slides at http://people.igalia.com/mrego/talks/blinkon2-css-grid-layout

Statistics

Views

Total Views
1,887
Views on SlideShare
1,658
Embed Views
229

Actions

Likes
3
Downloads
17
Comments
0

5 Embeds 229

https://twitter.com 224
http://www.slideee.com 2
https://tweetdeck.twitter.com 1
https://www.linkedin.com 1
http://newsblur.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

CSS Grid Layout. Specification overview. Implementation status and roadmap (BlinkOn 2 2014) CSS Grid Layout. Specification overview. Implementation status and roadmap (BlinkOn 2 2014) Presentation Transcript

  • CSS Grid Layout Specification overview. Implementation status and roadmap. Manuel Rego Casasnovas - rego@igalia.com BlinkOn 2 (Zurich) - 13-14 May 2014
  • About Igalia & me #cssgrid #blinkon #igalia Igalia is an Open Source consultancy founded in 2001. Member of Igalia Browsers Team. Blink and WebKit committer. Working on CSS standards: · · · · CSS Grid Layout CSS Regions - - 3/28
  • CSS Grid Layout “allows authors to easily define complex, responsive 2-dimensional layouts” by Tab Atkins Jr. (Google) at CSS WG Blog source: http://www.w3.org/blog/CSS/2014/01/23/css-grid-draft-updated/ View slide
  • CSS Grid Layout | Introduction #cssgrid #blinkon #igalia 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. · · · · 5/28 View slide
  • CSS Grid Layout | Introduction #cssgrid #blinkon #igalia CSS Grid Layout provides a mechanism to divide the available space in rows and columns with a set of predictable sizing behaviors. This defines a set of grid areas where designers can precisely place the elements of a web page. The Grid Layout spec can be used to intelligently reflow elements within a web page optimizing locations and sizes depending on the device where the page is rendered in. · · · 6/28
  • CSS Grid Layout | Concepts #cssgrid #blinkon #igalia Grid lines are the horizontal and vertical dividing lines of the grid. · 7/28
  • CSS Grid Layout | Concepts #cssgrid #blinkon #igalia Grid track is a generic term for a grid column . 8/28
  • CSS Grid Layout | Concepts #cssgrid #blinkon #igalia Grid track is a generic term for a grid row. 9/28
  • CSS Grid Layout | Concepts #cssgrid #blinkon #igalia Grid cell is the space between two adjacent row and two adjacent column grid lines. 10/28
  • CSS Grid Layout | Concepts #cssgrid #blinkon #igalia 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. 11/28
  • CSS Grid Layout | Syntax #cssgrid #blinkon #igalia .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/28
  • CSS Grid Layout | Track Breadths #cssgrid #blinkon #igalia Options:· length percentage flex (fr - free space - unit) max-content min-content minmax(min, max) auto - - - - - - - 13/28
  • CSS Grid Layout | Flexible Track Breadths #cssgrid #blinkon #igalia Flexible track breadths will grow or shrink and automatically adapt themselves to viewport size. · 14/28
  • CSS Grid Layout | Flexible Track Breadths #cssgrid #blinkon #igalia This allows to create very customized grids, defining flexible tracks with minimum and maximum breadths depending on their contents or the available free space left by the rest of tracks and viewport size. · 15/28
  • CSS Grid Layout | Responsive Layout #cssgrid #blinkon #igalia CSS Grid Layout can be used combined with other CSS features to create responsive designs. For example previous case can be adapted to portrait mode if the screen orientation changes using Media Queries. · · 16/28
  • CSS Grid Layout | Responsive Layout #cssgrid #blinkon #igalia @media (orientation: portrait) { .grid { grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; } .title { grid-column: 1; grid-row: 1; } .menu { grid-column: 2; grid-row: 1; } .main { grid-column: 1 / span 2; grid-row: 2; } .footer { grid-column: 1 / span 2; grid-row: 3; } } CSS Change grid-template-columns and grid-template-rows. Change position inside the grid of the different items. · · 17/28
  • CSS Grid Layout | Examples #cssgrid #blinkon #igalia Enable experimental Web Platform features: chrome://flags/#enable-experimental-web-platform-features GitHub repository with different examples: http://igalia.github.io/css-grid-layout/ Video: https://www.youtube.com/watch?v=nsWtMN54bEI · · Responsive grid: http://igalia.github.io/css-grid-layout/responsive-grid.html Gallery: http://igalia.github.io/css-grid-layout/gallery.html - - · 18/28
  • CSS Grid Layout | Areas & Alignment #cssgrid #blinkon #igalia .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 referenced to position grid items. Follows CSS Box Alignment spec for alignment features. · · 19/28
  • CSS Grid Layout | Areas & Alignment #cssgrid #blinkon #igalia 20/28
  • CSS Grid Layout | Auto-placement #cssgrid #blinkon #igalia 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 the grid container to generate implicit grid tracks, forming the implicit grid. grid-auto-flow controls the direction in which the grid items are automatically placed. · · 21/28
  • CSS Grid Layout | Auto-placement #cssgrid #blinkon #igalia 22/28
  • CSS Grid Layout | Current status #cssgrid #blinkon #igalia Spec (W3C Working Draft, 23 January 2014): http://www.w3.org/TR/css-grid-1/. Main browsers: · · Old version already shipped in IE/Trident. Work in progress in Chromium/Blink (Google and Igalia) and Safari/WebKit (Igalia). Mozilla has started the development in Firefox/Gecko early this year. · · · 23/28
  • CSS Grid Layout | Implementation Status #cssgrid #blinkon #igalia Define grids using all different properties in the spec. Support for named grid lines and named grid areas. All placement options are supported too (both explicit and implicit grid). Track sizing and auto-placement algorithms are already implemented. · · · · 24/28
  • CSS Grid Layout | Roadmap #cssgrid #blinkon #igalia Subgrids (still under discussion inside the CSS WG). Alignment. Fragmentation. Test coverage. Performance optimizations. Support for different writing modes. Selection. · · · · · · · 25/28
  • Acknowledgements #cssgrid #blinkon #igalia Bloomberg is sponsoring our work in CSS Grid Layout.· 26/28
  • Thank You! igalia.com/browsers g+ google.com/+ManuelRegoCasasnovas twitter @regocasasnovas www people.igalia.com/mrego/ github github.com/mrego