I hastily made this ugly graphic :-)

If you Love ReactJS, You’ll Love the CSS Grid

Here’s why you will.

Published in
2 min readJul 11, 2017

--

React took the frontend community by storm. I use ReactJS everyday, literarily.

When you get a hang of React, It becomes painless to create interactive UIs. You’re also able to design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Amazing!

What is even more interesting is the declarative APIs React offers. This is one of React’s sweet spots.

Why declarative? Declarative views make your code more predictable and easier to debug. It really does.

the official React documentation.

So, where does the CSS Grid come In?

The CSS Grid layout has been getting a lot of attention of late — and for good reason!

Just like React, it makes creating complex, 2 dimensional layouts easy. If you think creating layouts with CSS is crap or unintelligent, give the CSS Grid a try.

In one of the examples in the official css grid specification, i found this:

…an author might achieve all the sizing, placement, and alignment rules declaratively.

Yeah, it is declarative!

from the CSS Grid Spec.

As websites evolved from simple documents into complex, interactive applications, web layouts became difficult to compose. The CSS Grid has come to our rescue.

My sincere advice is, get a decent CSS Grid education ASAP.

And don’t be scared of using it in production. Rachel Andrew wrote an amazing piece on that too.

If you find the CSS Grid interesting to work with, tweet me. Even if you don’t, I may still be able to help 😄

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

--

--

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