It’s been a long journey but finally CSS Grid Layout
is here! 🚀
In the past week, Chrome 57
and Firefox 52
were released, becoming the first browsers
to ship CSS Grid Layout unprefixed (Explorer/Edge has been shipping
an older, prefixed version of the spec since 2012).
Not only that, but Safari will hopefully be shipping it
very soon too.
I’m probably biased after having worked on it for a few years,
but I believe CSS Grid Layout is going to be a big step in the history of the Web.
Web authors have been waiting for a solution like this since the early days of the Web,
and now they can use a very powerful and flexible layout module
supported natively by the browser, without the need of any external frameworks.
Igalia has been playing a major role
in the implementation of CSS Grid Layout in Chromium/Blink
and Safari/WebKit since 2013 sponsored by Bloomberg.
This is a blog post about that successful collaboration.
A blast from the past
Grids are not something new at all, since we can even find references
to them in some of the initial discussions of the CSS creators.
Next is an excerpt from a mail by Håkon Wium Lie in June 1995 to
Grids! Let the style sheet carve up the canvas into golden rectangles,
and use an expert system to lay out the elements!! Ok, drop the expert
system and define a set of simple rules that we hardcode.. whoops! But
grids do look nice!
Since that time the Web hasn’t stopped moving and there have been different
solutions and approaches to try to solve the problem of having
grid-based designs in HTML/CSS.
At the beginning of the decade Microsoft started to work
on what eventually become the CSS Grid Layout initial specification.
This spec was based on the Internet Explorer 10 implementation and the
experience gathered by Microsoft during its development.
IE10 was released in 2012, shipping a prefixed version of that initial spec.
Then Google started to add support to WebKit at the end of 2011.
At that time, WebKit was the engine used by both Chromium and Safari;
later in 2012 it would be forked to create Blink.
Meanwhile, Mozilla had not started the Grid implementation in Firefox
as they had some conflicts with their XUL grid layout type.
Igalia and Bloomberg collaboration
Bloomberg uses Chromium and they were looking forward
to having a proper solution for their layout requirements.
They detected performance issues due to the limitations
of the current layout modules available on the Web.
They see CSS Grid Layout as the right way to fix those problems
and cover their needs.
Bloomberg decided to push CSS Grid Layout implementation
as part of the collaboration with Igalia.
My colleagues, Sergio Villar
and Xan López,
started to work on CSS Grid Layout around the summer of 2013.
In 2014, Javi Fernández and I replaced Xan,
joining the effort as well. We’ve been working on this for more than 3 years
At the beginning, we were working together with some Google folks
but later Igalia took the lead role in the development of the specification.
The spec has evolved and changed quite a lot since 2013,
so we’ve had to deal with all these changes always trying to keep
our implementations up to date, and at the same time continue to add new features.
As the codebase in Blink and WebKit was still sharing quite a lot of things
after the fork, we were working on both implementations at the same time.
Igalia and Bloomberg
working together to build a better web
The results of this collaboration have been really satisfactory,
as now CSS Grid Layout has shipped in Chromium and enabled
by default in WebKit too (which will
hopefully mean that it’ll be shipped
in the upcoming Safari 10.1 release too).
for the feedback regarding Safari 10.1.
And now what?
Update your browsers, be sure you grab a version with Grid Layout support
and start to use CSS Grid Layout, play with it, experiment and so on.
We’d love to get bug reports and feedback about it.
It’s too late to change the current version of the spec, but ideas for a future version
are already being recorded in the CSS Working Group GitHub repository.
If you want to start with Grid Layout, there are plenty of resources available
on the Internet:
It’s possible to think that now that CSS Grid Layout has shipped, it’s all over.
Nothing is further from the truth as there is still a lot of work to do:
- An important step would be to complete the W3C Test Suite.
Igalia has been contributing to it and it’s currently imported
into Blink and WebKit, but it doesn’t cover the whole spec yet.
- There are some missing features in the current implementations.
For example, nobody supports subgrids yet, web authors
tell us that they would love to have them available.
Another example, in Blink and WebKit is that we are still finishing the support
for baseline alignment.
- When bugs and issues appear they will need to be fixed and
some might even imply some minor modifications to the spec.
- Performance optimizations should be done. CSS Grid Layout is a huge spec
so the biggest part effort so far has been done in the implementation.
Now it’s time to improve performance of different use cases.
- And as I explained earlier, people are starting to think about new features
for a future version of the spec. Progress won’t stop now.
First of all, it’s important to highlight once again Bloomberg’s role
in the development of CSS Grid Layout. Without their vision and support it
probably would not be have shipped so soon.
But this is not an individual effort, but something much bigger.
I’ll mention several people next, but I’m sure I’ll forget a lot of them,
so please forgive me in advance.
So big thanks to:
- The Microsoft folks who started the spec.
- The current spec editors: Elika J. Etemad (fantasai),
Rossen Atanassov, and Tab Atkins Jr.
Especially fantasai & Tab, who have been dealing with most of the issues
we have reported.
- The whole CSS Working Group for their work on this spec.
- Our reviewers in both Blink and WebKit:
Christian Biesinger, Darin Adler, Julien Chaffraix, and many other.
- Other implementors: Daniel Holbert, Mats Palmgren, etc.
- People spreading the word about CSS Grid Layout:
Jen Simmons, Rachel Andrew, etc.
- The many other people I’m missing in this list who helped
to make CSS Grid Layout the newest layout module for the Web.
Thanks to you all! 😻
And particularly to Bloomberg for letting Igalia be part of this amazing
experience. We’re really happy to have walked this path together and we really
hope to do more cool stuff in the future.