Resolving Gridlock 01

Resolving CSS Gridlock

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:

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:

It isn’t your fault, but it is your problem. […] It is the way of working on the Web that we deal with things not having complete support across the board. This is the nature of the industry you work in. Your job is to navigate the inevitable technology compromises in every project.

Rachel Andrew

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.

Summary

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.

Further resources

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.

~

90 Webmentions

Photo of Ralf Göke
Ralf Göke
Sehr schöner Post Matthias, danke dafür!
Photo of Sebastian Lasse ن;
Sebastian Lasse ن;
“So,” let's get y“our team together, prototype, try out” - nice piece. ;) Personally 'd start with a font or picture ratio, not 12 or 16 ...
Photo of webrocker-1.png
webrocker-1.png

Resolving CSS Gridlock - Matthias Ott

Very good thoughts on the state of our ever evolving playfield and how to yield the power that CSS-grid can bring –– in times when there still are old processes, browsers and mindsets around. […] 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 […] ...
Photo of Manuel Matuzović;
Manuel Matuzović;
„[...] whatever way you decide to explore CSS Grid, the most important thing is: Start using it now and help resolve CSS gridlock.“
Photo of Stefan Baumgartner
Stefan Baumgartner
"Resolving CSS Gridlock" by @m_ott matthiasott.com/articles/resol… -- the current state of affairs and where to go from here.
Photo of Chris Heilmann
Chris Heilmann
Resolving CSS Gridlock, by @m_ott matthiasott.com/articles/resol…
Photo of Andrew W ᕕ;( ᐛ; )ᕗ;
Andrew W ᕕ;( ᐛ; )ᕗ;
Resolving CSS Gridlock · Matthias Ott – User Experience Designer matthiasott.com/articles/resol… via @m_ott
Photo of Chris Heilmann
Chris Heilmann
Resolving CSS Gridlock, by @m_ott matthiasott.com/articles/resol…
Photo of Adam Argyle
Adam Argyle
agreed! it's a whole new world of jargon and potential that can only be fully leveraged if more than the front end engineer knows what it's capable of. i wish there was a design tool that helped facilitate this power, but most of them provide inputs that folks use traditionally
Photo of Matthias Ott
Matthias Ott
Yes! A few months ago I wasn’t that optimistic that visual design tools will one day be able to reproduce the same flexibility. But tools like Adobe XD and Figma now have features that are really promising. XD‘s Responsive Resize, for example, feels quite “flexboxy” already.
Photo of JulieG
JulieG
Hah, yes! I use Grid because it’s so much nicer to write than floats and whatever, but I’m not using its creative potential at all. Header, main, sidebar, footer all stacked up is all I need
Photo of Matthias Ott
Matthias Ott
Exactly! But when I ask designers if they know what Grid does, many haven’t even heard of it yet. Given that the new layout methods are so fundamentally different in their flexibility and how content determines how the resulting design behaves, we really need to bridge this gap.

Likes

Reposts