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.
Grid, however, will solve this problem.