CSS Grid Layout: The modern way of doing layout on the Web
Subscribe to the O’Reilly Radar Podcast to track the technologies and people that will shape our world in the years to come.
In this week’s episode of the Radar Podcast, O’Reilly’s Mac Slocum chats with Rachel Andrew, founder of edgeofmyseat.com, about CSS Grid Layout and the role responsive design is playing in emerging Web technologies.
In 2004, Andrew published The CSS Anthology: 101 Essential Tips, Tricks & Hacks. Through the years of revisions, she noted in the interview, not that much has changed; sure, we’ve moved on from Netscape 4, she said, but “the [layout] methods we’re using haven’t moved on much since I wrote that book, which is kind of terrifying.” This is why Andrew is so excited about CSS Grid Layout, which she sees as bringing Web layout into the modern day:
CSS Grid Layout is a new spec, an emerging spec. It originally came from Microsoft. In fact, there’s an early implementation of it in IE 10 and 11. It’s kind of moved on now. It’s really a specification for laying out Web pages and/or applications. It’s something that we haven’t really had up to now. The specs and the sort of things that we’re using for layout, things like float and so on, really are quite like hacks to get them to work. Developers have been working around this stuff for years. Grid, I’m quite excited about because it’s sort of the first time it feels like a really modern way of doing layout on the Web.
Andrew also noted that responsive design has been a step forward in the way designers approach layout. She noted that the big problem five years ago was the battle with smartphones and the early tendency to solve the problem by building separate mobile sites. What responsive design brought to the table then, it continues to bring to the table now, she explained:
Things are going to change again. You know, we’re starting to look at these smart watches and things like the Apple Watch, and how do these layouts then work on these tiny, tiny devices. I think [responsive design has] been a real step forward in terms of people stopping thinking about Web pages being a fixed thing.
One of the biggest things that responsive design has done is it’s stopped people from saying, ‘Well, here I’ve got my Photoshop document. Make me a website that looks like this, exactly like this, and it will display like this in all browsers.’ With responsive design, we get away from that because well, it just doesn’t. It can’t. It’s going to be different on all these devices. I think it’s been a huge step forward for the Web and how we see Web pages and how we understand how these things work.
What happens next? Who knows. Who knows what devices will happen. Five years ago, we were just getting to grips with phones, and the fact that people could use the Web on their phones. In five years time, what on earth are we going to be looking at, you know? It’s very difficult to say. I think that’s what makes it exciting. I’ve been doing this since 1996. I still love what I do and love finding out about these things.
Although we can do exciting things with our shiny high-bandwidth smartphones, Andrew stressed, we need to make sure we don’t lose sight of the real goal — to build things that are useful to everyone around the world:
I’m very interested in performance, generally. I’ve always been very keen to see the Web being available to everyone. That’s been something that right through my career I’ve cared about. We’re seeing people in certain areas of the world where feature phones are really the main, regular access to the Web. We get all excited about all this new stuff, and we get excited about our shiny new devices and the fact that we’ve got higher bandwidth a lot of the time. But how do we make sure that the stuff we’re building is also useful around the world and for everybody, not just for people who’ve got the money to spend on the latest iPhone?
Also in this podcast…