CSS Grid is here and I bet you also heard that it's a game changer that could once more completely change the way we approach web layout.
A New Kid on the Block
The new layout module is a great achievement for all people involved in the process and also the fast implementation by browser makers is worth mentioning: It is the first time that such a significant new module has found its way into all major browsers within only a few months time. So a lot of effort went into CSS Grid until it finally became a reality. Rachel Andrew and Jen Simmons, for example, were not only actively involved in the standardization process but also raised awareness within the community with numerous talks and projects like Grid by Example or The Experimental Layout Lab.
Indeed, CSS Grid completely changes the way we approach layout, both for developers and designers. Whereas before we had to use hacky CSS to carve our layouts out of a resistive document flow, we can now act more freely and place elements in a predefined grid without using a separate grid system – as Rachel Andrew points out, CSS Grid already is a grid system. At the same time, CSS Grid acknowledges the fluid nature of the medium and allows for brilliant layout solutions like this technique by Tyler Sticka, where he creates a fluid responsive layout container with only a few lines of CSS. Or this:
A fully responsive grid with no media queries in three lines of code is actually pretty awesome: https://t.co/9zdV2t0CBe pic.twitter.com/ju2H3deJhx— Stefan Baumgartner (@ddprrt) May 12, 2017
This is amazing stuff! And we can expect more of such smart layout tricks once people start using CSS Grid in production. And here's the good news: you can use it TODAY!
But wait a minute.
Wicked or Weakness?
For all the well-justified euphoria, there is still one important thing to consider when using CSS Grid today: Although all major browsers now support CSS Grid (with Microsoft Edge coming soon), the overall support naturally isn't very good yet. Caniuse.com puts browser support for Grid at 69.3 % (prefixed) and depending on the distribution of browser shares in your audience, it could be even lower. So if we want to use Grid in production, we will definitely have to provide a fallback for older browsers. One often-heard suggestion to solve this is to use a really simple float or Flexbox layout as a fallback. The argument: Instead of trying to make a design look the same across all browsers, let's use CSS Grid to its full potential and provide a minimum viable layout that still cuts the mustard (read: displays content) for browsers that don't support it yet.
The basic approach of applying the principle of progressive enhancement – or, like in this case, graceful degradation – is absolutely the right way to go, but one huge problem remains: If we definitely need a layout that works without grid, a super simple one column layout often just won't be sufficient. Neither for the client who would need to be fine with the idea that a large percentage of users get to see a minimum viable design nor for the users themselves who will be left with a subpar solution. So we will have to put some more effort into the fallback layout and before we know it, we are effectively building two layouts after all. Even worse: We would also have to think twice how a certain layout could be done in CSS because the layout techniques differ so much. And if using floats and Flexbox will also still work in newest browsers why are we building a layout with CSS Grid anyway?
Rachel Andrew addressed exactly this question in her recent, excellent post “Is it really safe to start using CSS Grid Layout?”. She answered it aptly:
I couldn’t agree more: Exploring and using newest technologies, which requires that we cope with incomplete support, is crucial to successful projects and has always been a huge part of what makes the Web great. But still: We have to be careful that we don't set our expectations regarding an immediate adoption of CSS Grid too high. Just because people can use CSS Grid theoretically doesn’t mean they will actually use it in practice, especially if this involves writing layout code twice and with an already established method out there. Humans are allergic to change. So if we really want CSS Grid to succeed outside of the closed space of innovators and evangelists, the story has to be not only “Grid is so awesome, use it now!” but also: “Here's how to use CSS Grid in production in a responsible way – it's possible.”
So What is This Thing Called CSS Grid?
If we don’t want to use Grid just for Grid’s sake, we have to understand what Grid really is and start asking the right questions like:
- What problems does Grid solve that float-based solutions can't?
- How can Grid be used responsibly to really enhance a design?
- And ultimately: how does the use of Grid benefit the user?
To find answers to those questions, we – both designers and developers – will now need to learn about the strengths and weaknesses of CSS Grid. We need to learn how to play this new instrument because the shift really is this fundamental: At the moment it seems we are all designing with the same 12 column grid – if we are reckless, we try 16 columns. CSS Grid will allow us to resolve this gridlock, once we fully understand the radicality of the new flexibility it brings. Grid allows for greater flexibility for developers, because defining custom grids will be as easy as setting a font-size. And it gives greater flexibility to designers: It could allow us to reach the graphical richness we see in editorial design and graphic design in general.
Prototyping Our Way out of Gridlock
So the shift in thinking and the realization of the possibilities Grid offers has to happen on both sides of the spectrum, in design and development. Naturally, this is a hard thing to do when you still stick to the old waterfall workflow that many agencies still haven't left behind. To fully leverage grids potential, a frequent exchange between the disciplines is needed, ideally in a multi-disciplinary team that consists of UX and visual designers, front-end engineers, and developers. It's another manifestation of the huge shift we see in contemporary web design: the decision making largely happens in development, at the end of the good old waterfall and working with code is crucial for finding appropriate and outstanding design solutions.
That's why prototyping has become an essential tool for teams building modular responsive web designs today. It allows for testing ideas and hypotheses with real code even at early project stages, which is invaluable in crafting responsive designs. Prototyping also reveals the weak spots of a design and by that opens up new possibilities for innovative solutions. So get your team together, prototype, try out what CSS Grid can do that conventional layout methods can't and how you can use it effectively in your project. Then use Grid specifically for that purpose.
CSS Grid in Modular Systems
Whether you go full throttle with CSS Grid or choose a moderate approach and use it only sparingly as an enhancement totally depends on your project setting and requirements. But following a modular design approach can facilitate the adoption of new web technologies like Grid. Splitting up your interface into components – for example with a pattern library tool like Fractal – will make it easier to use Grid, because you can apply it in an isolated scope. This makes the code more manageable and also allows you to easily optimize single components for older browsers. And most importantly, you can try out new layout solutions quickly without breaking the whole system. This makes a pattern library also a great tool for prototyping with new technologies, but that's another story.
Dealing with incomplete support has always been one of the challenges of creating things on the Web. Not so long ago, we had to be careful with using structural pseudo-classes like nth-child, the calc() function, or even display: inline-block. With CSS Grid it might be a little bit more difficult to find a way to use it responsibly because it is such a large module that fundamentally changes the way we do layout on the Web. To make the best use of it, we, therefore, need to learn how to play this new instrument and prototyping in code can be vital to explore the possibilities that CSS Grid offers. Until we have broader browser support it can also be a good strategy to use Grid only as an enhancement and on the component level. But whatever way you decide to explore CSS Grid, the most important thing is: Start using it now and help resolve CSS gridlock.
CSS Tricks' Complete Guide to CSS Grid
Rachel Andrew: Start Using CSS Grid Layouts Today (Video)
Shop Talk Show 262 – CSS Grid with Rachel Andrew and Jen Simmons
CSS Grid Garden – A game for learning CSS Grid layout
Grid layout, grid layout everywhere!, by Stefan Baumgartner (@ddprrt)
CSS Grid and Grid Inspector in Firefox
Rachel Andrew's Grid by Example
The Experimental Layout Lab of Jen Simmons
Realizing Common Layouts Using CSS Grid Layout
Practical CSS Grid: Adding Grid to an Existing Design, by Eric Meyer
CSS Grid Layout and Progressive Enhancement
A Collection of Interesting Facts about CSS Grid Layout, by Manuel Matuzović
Enhancing CSS Layout: From Floats To Flexbox To Grid, also by Manuel Matuzović
The header image is based on a photograph by Thomas Hawk licensed under CC BY 2.0, slightly cropped and edited.