By Juan José Sánchez Penas

2. New layout models on the Web
Implementing CSS3 Standards: CSS Grid Layout & CSS Regions
Juan J. Sánchez - jjsanchez@igalia.com
Xavier Castaño - xcastanho@igalia.com
Igalia
W3C Booth | Mobile World Congress (Barcelona) - 24-27 February 2014

3. Igalia
#igalia #W3C #MWC14
Open Source consultancy founded in 2001.
Top external contributor to WebKit and Blink.
Member of the W3C, contributing in different topics like
CSS standards and accessibility.
·
·
·
CSS Grid Layout in Blink and Webkit.
CSS Regions in WebKit.
CSS Flexible Box Layout and CSS Variables in the
past.
-
-
-
3/32

4. 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/

5. CSS Grid Layout | Introduction
#igalia #W3C #MWC14
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 one of them: a powerful and flexible
mechanism defined by the W3C.
·
·
·
·
5/32

6. CSS Grid Layout | Introduction
Video format or MIME type is not supported.Video format or MIME type is not supported.Video format or MIME type is not supported.Video format or MIME type is not supported.Video format or MIME type is not supported.
0:000:00
#igalia #W3C #MWC14 6/32

7. CSS Grid Layout | Concepts
#igalia #W3C #MWC14
Grid lines are the
horizontal and vertical
dividing lines of the grid.
·
7/32

8. CSS Grid Layout | Concepts
#igalia #W3C #MWC14
Grid track is a generic term
for a grid column
.
8/32

9. CSS Grid Layout | Concepts
#igalia #W3C #MWC14
Grid track is a generic term
for a grid
row.
9/32

10. CSS Grid Layout | Concepts
#igalia #W3C #MWC14
Grid cell is the space
between two adjacent row
and two adjacent column
grid lines.
10/32

11. CSS Grid Layout | Concepts
#igalia #W3C #MWC14
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/32

12. CSS Grid Layout | Syntax
#igalia #W3C #MWC14
.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/32

13. CSS Grid Layout | Track Breadths
#igalia #W3C #MWC14
Options:·
length
percentage
flex (fr - free space - unit)
max-content
min-content
minmax(min, max)
auto
-
-
-
-
-
-
-
13/32

14. CSS Grid Layout | Demo
Video format or MIME type is not supported.Video format or MIME type is not supported.Video format or MIME type is not supported.Video format or MIME type is not supported.Video format or MIME type is not supported.
0:000:00
#igalia #W3C #MWC14 14/32

15. CSS Grid Layout | Areas & Alignment
#igalia #W3C #MWC14
.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.
·
·
15/32

16. CSS Grid Layout | Areas & Alignment
#igalia #W3C #MWC14 16/32

17. CSS Grid Layout | Current status
#igalia #W3C #MWC14
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 and
Igalia) and Safari/WebKit (Igalia).
Firefox/Gecko has plans to implement it but work has
not started yet.
·
·
·
17/32

18. CSS Grid Layout | Status in WebKit and Blink
#igalia #W3C #MWC14
Done:
Work in progress:
·
Grid properties, named grid lines and named grid areas
supported.
Placement options, track breadths and layout grid items are
also implemented.
-
-
·
Alignment.
Performance optimizations.
Support for different writing modes.
Selection.
Subgrids (out of Working Draft for now).
-
-
-
-
-
18/32

19. CSS Regions
“make it easier than ever to create rich, magazine-like layouts within web
content”
by Beth Dakin (Apple) and Mihnea-Vlad Ovidenie (Adobe)
at Surfin' Safari - The WebKit Blog
source: https://www.webkit.org/blog/3078/advanced-layout-made-easy-with-css-regions/

20. CSS Regions | Introduction
#igalia #W3C #MWC14
Allowing to flow content into existing styled containers is
currently very difficult.
CSS regions enable you to link HTML elements so that text
overflow from one region automatically flows into the
next region
It is a powerful and flexible mechanism defined by the
W3C.
·
·
·
20/32

21. CSS Regions | Introduction
Video format or MIME type is not supported.Video format or MIME type is not supported.Video format or MIME type is not supported.Video format or MIME type is not supported.Video format or MIME type is not supported.
0:000:00
#igalia #W3C #MWC14 21/32

22. CSS Regions | Concepts
#igalia #W3C #MWC14
Named flow is the content that will be displayed into the different
regions.
Region is a block container that has an associated named flow.
·
·
22/32

23. CSS Regions | Syntax
#igalia #W3C #MWC14
.source {
flow-into: content-1;
}
.region {
flow-from: content-1;
}
CSS
flow-into property places an element into a named flow.
flow-from converts a block in a region and associates it with a named flow.
·
·
<div class="source">Lorem ipsum dolor sit amet...</div>
<div class="region" id="region-1"></div>
<div class="region" id="region-2"></div>
<div class="region" id="region-3"></div>
HTML
23/32

24. CSS Regions | Demo
Video format or MIME type is not supported.Video format or MIME type is not supported.Video format or MIME type is not supported.Video format or MIME type is not supported.Video format or MIME type is not supported.
0:000:00
#igalia #W3C #MWC14 24/32

25. CSS Regions | Selection
#igalia #W3C #MWC14
Selection is sometimes
unnatural like in other
layout models
(absolute positions,
flexbox, grid, shadow
DOM).
Igalia is collaborating
with Adobe to make
selection in CSS
Regions spec
compliant.
·
·
25/32

26. CSS Regions | CSS Fragmentation
#igalia #W3C #MWC14
The fragmentation problem is common to different features like
CSS Paged Media, CSS Multi-column Layout and CSS Regions.
The CSS Fragmentation spec defines the rules for splitting the
content into containers.
The fragmentation containers (fragmentainers) can be pages,
columns or regions depending on the case.
Breaks divide the content into the different fragmentainers.
·
·
·
·
Breaks can be unforced or forced.
Some elements can be marked as unbreakable.
-
-
26/32

27. CSS Regions | Current Status
#igalia #W3C #MWC14
Spec (W3C Working Draft, 18 February 2014):
http://www.w3.org/TR/css3-regions/
Main browsers:
·
·
Already shipped in IE/Trident and Safari/WebKit
(Adobe with Igalia collaborating on selection).
Chromium/Blink implementation is being removed.
However, CSS Fragmentation is going to be kept.
Firefox/Gecko do not plan to implement it.
·
·
·
27/32

28. CSS Regions | Status in WebKit
#igalia #W3C #MWC14
Done:
Work in progress:
·
Named flows and regions are fully functional.
Support to manage regions overflow.
JavaScript objects available to manipulate regions.
-
-
-
·
Selection. Igalia has a working prototype.
Region styling support (only color and background for now).
-
-
28/32

29. Conclusions
#igalia #W3C #MWC14
Creating nice layout and content designs on the Web was
challenging.
Solutions: CSS Grid Layout and CSS Regions combined
with other specs like CSS Shapes and/or Media Queries.
Igalia and others are working on getting this implemented
in the main browsers.
·
Complex layouts.
Responsiveness to different screen sizes.
Nice magazine contents on the Web.
Flowing content into existing styled containers.
-
-
-
-
·
·
29/32

30. Collaborations
#igalia #W3C #MWC14
Bloomberg is
sponsoring our work
in CSS Grid Layout.
Igalia partners with
Adobe to collaborate
in CSS Regions.
·
·
30/32

31. Thank You!
igalia.com/contact - igalia.com/browsers
Juan J. Sánchez - jjsanchez@igalia.com
Xavier Castaño - xcastanho@igalia.com
Igalia