{"id":903,"date":"2015-03-09T14:58:56","date_gmt":"2015-03-09T13:58:56","guid":{"rendered":"http:\/\/blogs.igalia.com\/jfernandez\/?p=903"},"modified":"2015-06-02T10:46:33","modified_gmt":"2015-06-02T08:46:33","slug":"content-distribution-in-css-grid-layout","status":"publish","type":"post","link":"https:\/\/blogs.igalia.com\/jfernandez\/2015\/03\/09\/content-distribution-in-css-grid-layout\/","title":{"rendered":"Content Distribution in CSS Grid Layout"},"content":{"rendered":"

It’s been a while since Igalia<\/a> and Bloomberg<\/a> started to implement the Box Alignment<\/a> specification for the CSS Grid Layout<\/a> model. Some weeks ago we accomplished an important milestone of our roadmap landing in Blink trunk the last patches implementing the Content Distribution properties: align-content<\/strong> and justify-content<\/strong>.<\/p>\n

Quoting the CSS Box Alignment document, the content distribution properties are defined as follows:<\/p>\n

Aligns the contents of the box as a whole along the box\u2019s inline\/row\/main axis.
\nThe alignment container<\/a> is the grid container\u2019s content box. The alignment subjects<\/a> are the grid tracks.<\/p><\/blockquote>\n

The CSS syntax of these recently added properties gives an idea of how powerful and flexible they are for grid layout definitions, allowing every possible alignment values combination:<\/p>\n

auto | <baseline-position<\/a>> | <content-distribution<\/a>> || [ <overflow-position<\/a>>? && <content-position<\/a>> ]<\/p><\/blockquote>\n

It’s worth mentioning that Baseline Alignment<\/a> is still not implemented, as well as the <content-distribution><\/em> values for Distribution Alignment. However, in the latter case I’ve got already a quite promising draft implementation which, eventually, has been very useful to activate a discussion<\/a> inside the W3C community to allow these alignment values for grid. In previous versions of the specification it was stated that all <content-distribution><\/em> values should use their <content-position><\/em> fallback values for grid containers. I’m glad that such decision was finally made, because I think that <content-distribution><\/em> values are really useful for defining fancier grid layouts. I’ll talk about this soon in a new post, as I consider it deserves a detailed description with the proper examples.<\/p>\n

Last, but not least, as it happens with Self Alignment it allows using overflow keywords<\/strong> to define how we want to handle grid’s content overflow. It works in the same way for Content Distribution as we’ll see later with some examples.<\/p>\n

Aligning the grid<\/h3>\n

When there is available space in the grid container block, it’s always useful to have a way to control how we want to use such space and how we want our grid to behave on it. It might happen that container’s size changes (fullscreen mode) or we could have to deal with a content sized grid modifying its content’s size. There are quite many possibilities, so I’ll leave this issue for user\/designer’s imagination and I’ll focus on very simple examples to illustrate the concept.<\/p>\n

For now, let’s consider this case to understand what you can do with the different <content-alignment><\/em> values in a grid layout.<\/p>\n

.grid {\r\n    grid: 50px 50px \/ 100px 100px;\r\n    position: relative;\r\n    width: 200px;\r\n    height: 300px;\r\n}\r\n.fixedSize {\r\n    width: 20px;\r\n    height: 40px;\r\n}\r\n
\r\n   
<\/div>\r\n   
<\/div>\r\n   
<\/div>\r\n   
<\/div>\r\n<\/div>\r\n<\/pre>\n
We are defining a 2×2 grid<\/em> with 50×100 pixels<\/em> cells where we are going to place 4 items<\/em>, one in each cell. Notice that items at (1,1) and (2,2) have a fixed size<\/strong> of 20×40 pixels<\/em>, while the other 2 are auto-sized<\/em> so they will be stretched<\/strong> to fill their corresponding grid cell (if you don’t know why, a reading of previous post<\/a> might help). Also, bear in mind that both align-content<\/em> and justify-content<\/em> properties have start<\/em> as the initial value for grids.<\/p>\n
\"ContentAlignment\"<\/a><\/p>\n
Controlling the grid overflow<\/h3>\n
When grid content’s size exceeds its container dimensions there is the risk of data loss<\/strong>. Some examples of this scenario are center<\/em> or end<\/em> alignment from the viewport’s edges; all the content overflowing the viewport’s area can’t be reached, hence we lose such data. In order to prevent this issue Box Alignment specification defines the safe overflow<\/strong> mode, which basically forces a start<\/em> alignment value for the property handling the dimension where the overflow is detected.<\/p>\n
Using the same CSS<\/em> and HTML<\/em> code in the example above, we can easily define cases where this data loss issue (red colored arrows) is clearly noticeable just modifying the height or width to cause top or left overflow respectively.<\/p>\n
\"Content-Alignment-Overflow1\"<\/a><\/p>\n
There are other situations where Content Alignment and Overflow interact in a different way, using margins, padding or\/and borders and even combining different writing-modes and flow directions. The effect of the alignment values varies considerably depending on those factors but I think you have now a clear idea of how to use these new properties in a grid layout.<\/p>\n
Current status and next steps<\/h3>\n
With the grid support for the align-content<\/em> and justify-content<\/em> CSS properties in Blink we’ve got most of the Box Alignment specification covered. As it was commented before, just Base Alignment is still pending to be implemented in Chromium browsers. I have to admit that there are also some bugs and wrong behavior using certain CSS combinations, specially regarding orthogonal flows, but we are working on it right now and I hope to integrate the patches soon in trunk.<\/p>\n
For the time being, let’s consider the following table as the current implementation status<\/strong> of the Box Alignment specification for the Grid Layout model in WebKit (Safari\/Epiphany) and Blink (Chrome\/Chromium\/Opera) based browsers:<\/p>\n
\"align-grid-support-1\"<\/a><\/p>\n
The lack of progress<\/strong> in the implementation of the Box Alignment specification in the WebKit web engine is disappointing. I’ve been stuck for quite a lot of time trying to upgrade the CSS properties to the last version of the spec, mainly due design and performance issues. I’ll discuss with the WebKit hackers the best approach to solve this issue so I can put the Grid Layout implementation at the same level than in Blink web engine.<\/p>\n
Igalia and Bloomberg will continue working on the implementation of the CSS Grid Layout specification and among my short\/mid term challenges are completing the Box Alignment support. These goals include the following tasks:<\/p>\n