Should You Learn the CSS Grid or Not ?

A case for the past and present of CSS layouts.

Ohans Emmanuel
Flexbox and Grid
3 min readNov 17, 2017

--

There exists a wide amount of articles on the CSS Grid. I have written a lot of myself. It is no surprise that the CSS Grid has been the talk of the CSS community for sometime now.

Yeah, that’s pretty impressive. But let’s take a different approach to the CSS Grid and CSS layouts in general.

Ready?

Let’s go.

How Did We Get Here?

A people without the knowledge of their past history, origin and culture is like a tree without roots — Marcus Garvey

The CSS Grid layout (or perhaps, Flexbox) will feel like a shiny new toy if you do not know how we got to this point in the history of CSS layouts. Even if you did, you will appreciate the CSS Grid layout by taking a look at some of the problems it attempts to solve.

In a nutshell, a lot of things make sense with CSS, except for crafting intelligent CSS layouts. There were just so many layout hacks In the past. I took the liberty to explain this via a case study in ‘How to Approach Layouts in 2017’

So, Should You Use the CSS Grid ?

The CSS Grid layout is brilliant — true. It is the future of layouts in CSS and it is not going away anytime soon — true.

Should you use it?

The simple answer “ Yes, you should absolutely use the CSS Grid layout!”

The more involved answer is, “Honestly, it may not 100% satisfy your demands on all projects right now

Someone once said to me, “So for a big e-commerce site operating on a B2B level, where IE11 is the largest % of browsers, the modern CSS grid standard is useless and we have to fall back to older standards like flexbox

Well, maybe. A big ecommerce site may not be particular about building future proof layouts. If their users are mostly on IE11, they are likely to be happy just using Flexbox.

I get it.

The choice to use the CSS Grid layout must force you to answer some very serious questions.

“Should I start using the CSS Grid in production right now?”

Must I ?

Progressive enhancements? “Well, that sounds good in theory. Does it work in real projects?”

Using the CSS Grid layout moves the web forward

I read an answer to why Apple keeps getting rid of things, instead of adding them

There, I learned this:

“Supporting legacy is not always the best answer. Dropping things helps the industry move forward to adopt newer, better, formats.”

In the same way, choosing to learn and use the CSS Grid advances the web. It helps the industry embrace newer and better formats. It helps us grow as a community. A community we so love, and want to grow.

Please be a part of this growth.

Where possible, invest in a decent CSS Grid education.You’ll be helping move the web forward.

Cheers :)

Want to become Pro?

Download my free CSS Grid cheat sheet, and also get two quality interactive Flexbox courses for free!

Get the Free CSS Grid Cheat sheet + Two Quality Flexbox Courses for free!

Get them now

--

--

Ohans Emmanuel
Flexbox and Grid

Authored 5 books and counting. This one will teach you intermediate to advanced Typescript in React: https://shrtm.nu/kqjM