Rego’s Everyday Life

A blog about my work at Igalia.

Welcome CSS Grid Layout

Igalia has been working in the implementation of CSS Grid Layout since past year (more below). This year I’ve had the chance to join the team and help to move forward this great spec. State of the Art

Maybe, you’ve never heard before about CSS Grid Layout, but for sure you know part of the history of design in the web platform.

To solve all these issues W3C has defined a new powerful and flexible spec that will make web designer’s life happier.

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 provides a mechanism to divide the available space in rows and columns with a set of predictable sizing behaviors. It defines a set of grid areas where designers can precisely place the elements of a web page.

CSS Grid Layout example CSS Grid Layout example

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, creating responsive designs.

Example

So, let’s imagine that you have the following HTML and you want to layout it like in the picture above:

<div class="grid">
<div class="title">Title</div>
<div class="menu">Menu</div>
<div class="main">Main</div>
<div class="footer">Footer</div>
</div>

This will be the CSS syntax required to do the magic:

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

Where:

Flexible tracks (the ones defined with 1fr in the previous example) will grow or shrink and automatically adapt themselves to the viewport size. This allows to create very customized grids, defining flexible breadths depending on the contents or the available space.

We’ve created a repository with some examples and demos, feel free to play with them to get a better understanding of the spec capabilities:

http://igalia.github.io/css-grid-layout/

Implementation status

Despite of being a Working Draft (WD) spec, implementations are appearing in the main web engines:

Acknowledgements

Finally, we’d like to thank Bloomberg for sponsoring our work around CSS Grid Layout on Blink and Webkit, together with the implementation of ECMAScript 6 (ES6) features in V8 and SpiderMonkey JavaScript engines.

Igalia logo Bloomberg logo
Igalia and Bloomberg working together to build a better web

As a related note, my mates Juanjo and Xavi were talking about CSS Grid Layout and CSS Regions in the last Mobile World Congress at Barcelona as part of the W3C booth. Check the slides in case you missed it (demos and videos of this post are extracted from them).

Igalia will keep working hard to evolve the implementation of CSS Grid Layout spec both in Blink and WebKit. We’ll try to keep you informed about our progress, stay tuned!


Comments

On 14/03/13 18:37, **[Tanty](http://www.andresgomez.org/)** wrote:

Awesome work!