Igalia

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.

CSS Grid Layout

“allows authors to easily define complex, responsive 2-dimensional layouts”

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

CSS Grid Layout | Introduction

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.

CSS Grid Layout | Introduction

CSS Grid Layout | Concepts

Grid lines are the horizontal and vertical dividing lines of the grid.
Grid track is a generic term for a grid column or grid row.
Grid cell is the space between two adjacent row and two adjacent column grid lines.
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.

CSS Grid Layout | Concepts

Grid lines are the horizontal and vertical dividing lines of the grid.
Grid track is a generic term for a grid column or grid row.
Grid cell is the space between two adjacent row and two adjacent column grid lines.
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.

CSS Grid Layout | Concepts

Grid lines are the horizontal and vertical dividing lines of the grid.
Grid track is a generic term for a grid column or grid row.
Grid cell is the space between two adjacent row and two adjacent column grid lines.
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.

CSS Grid Layout | Concepts

Grid lines are the horizontal and vertical dividing lines of the grid.
Grid track is a generic term for a grid column or grid row.
Grid cell is the space between two adjacent row and two adjacent column grid lines.
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.

CSS Grid Layout | Concepts

Grid lines are the horizontal and vertical dividing lines of the grid.
Grid track is a generic term for a grid column or grid row.
Grid cell is the space between two adjacent row and two adjacent column grid lines.
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.

CSS Grid Layout | Syntax

      .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;          }

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>

CSS Grid Layout | Track Breadths

Options:
- length
- percentage
- flex (fr - free space - unit)
- max-content
- min-content
- minmax(min, max)
- auto

CSS Grid Layout | Demo

CSS Grid Layout | Areas & Alignment

      .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;                       }

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

CSS Grid Layout | Areas & Alignment

CSS Grid Layout | Current status

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.

CSS Grid Layout | Status in WebKit and Blink

Done:
- Grid properties, named grid lines and named grid areas supported.
- Placement options, track breadths and layout grid items are also implemented.
Work in progress:
- Alignment.
- Performance optimizations.
- Support for different writing modes.
- Selection.
- Subgrids (out of Working Draft for now).

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

CSS Regions | Introduction

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.

CSS Regions | Introduction

CSS Regions | Concepts

Named flow is the content that will be displayed into the different regions.
Region is a block container that has an associated named flow.

CSS Regions | Syntax

      .source {
          flow-into: content-1;
      }

      .region {
          flow-from: content-1;
      }

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>

CSS Regions | Demo

CSS Regions | Selection

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.

CSS Regions | CSS Fragmentation

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.

CSS Regions | Current Status

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.

CSS Regions | Status in WebKit

Done:
- Named flows and regions are fully functional.
- Support to manage regions overflow.
- JavaScript objects available to manipulate regions.
Work in progress:
- Selection. Igalia has a working prototype.
- Region styling support (only color and background for now).

Conclusions

Creating nice layout and content designs on the Web was challenging.
- Complex layouts.
- Responsiveness to different screen sizes.
- Nice magazine contents on the Web.
- Flowing content into existing styled containers.
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.

Collaborations

Bloomberg is sponsoring our work in CSS Grid Layout.
Igalia partners with Adobe to collaborate in CSS Regions.

Thank You!

igalia.com/contact - igalia.com/browsers