Melanie Sumner

Unapologetically Awesome.

CSS Grid – Use Case

posted on

a closeup of a building that looks like a giant grid
Photo by Bryan Colosky on Unsplash

I’m looking forward to CSS Grid for a lot of reasons.

At first, I admit that I found them really confusing and even decided that they will really only be useful for the kind of sites that I don’t get to work on. I’m an enterprise application developer, living in the land where 70% of my users are on IE, and even just using Flexbox is considered revolutionary.

But there are some things that I think will really be made easier with Grid, even here in enterprise land. Flexbox is intended for uses where even spacing is desired in one dimension – either horizontal or vertical. Grid, however, is intended to alleviate even spacing for both horizontal and vertical use. Exciting, right? I don’t know about you, but I get chills just thinking about it. Even if it doesn’t excite you to the point of goosebumps, it still should intrigue you.

Here is a specific, real-world use case that I am dealing with in a current project:

I have a task list in a sidebar, one that is divided up into three tabs.

  • the tabs are spaced evenly across the width of the side bar
  • the application is available in many different languages, which means I can’t always predict the width of the words. Nordic Languages, for example, can have really long words. Russian letters can take up more width than an English “m” or “w”.

This means that I can have a set of tabs look very different, depending on the language.

HAPPY PATH: In this screenshot, you can see that I have enough width and the text fits nicely.
UNHAPPY PATH: In this screenshot however, you can see that if a word wraps, then I have visual ugliness because the heights don’t match.
This is one area where design & development doesn’t need to be so complex!

I know that there are current methods to solve this problem- a bit of JavaScript, some CSS magic, etc. But these current methods are verbose and add a level of irritating complexity to managing CSS in a large project.

Grid, however, will solve this problem.

I’ll work to get a code sample for how this would be solved with CSS Grid; in the meantime, how about checking out Rachel Andrews’ or Jen Simmons’ excellent tutorials and talks on the subject?