June 11, 2017, I decided to read the CSS Grid spec.
The Spec was a little bit technical, but it was by far the most
enjoyed specification I had ever read. If youre a more advanced
it for future references.
So, will this be helpful?
I believe the difference between good and great engineers, is
that the latter take their time to understand what really goes on
under the hood. They learn how things work, instead of learning by
copy and paste.
So, do you want to be a great developer?
Hell, yeah. Or, you wouldnt be reading this article.
What youll learn
While reading the spec, I learned some very subtle, but
In this article, I will share them with you.
1. The CSS Grid is declarative
Declarative APIs are so sweet to work with. Think ReactJS?
As websites evolved from simple documents into complex,
interactive applications, web layouts became difficult to compose.
So difficult, they were my nightmare.
This is exactly the problem CSS Grid has come to
The CSS Grid takes away the painful process of crafting
intelligent layouts and replaces it with a beautiful set of
declarative rules that make the process near effortless.
These are good times in the history of CSS.
2. The fractional unit does not always produce equally spaced
rows and columns
One of the first things everyone learns and gets to love about
the CSS Grid is the
fractional unit. Even a duck can get away with it.
The fractional unit takes away the pain of calculating
percentages. It is a delight to work with.
Most people teach that the fractional unit (fr) yields equally
spaced columns or rows.
For example, a declaration like 1fr 1fr 1fr is expected to give
you columns or rows of equal spacing. See the illustration
spaced columns created by the fractional unit.
Sadly, this is NOT always true. Poor duck.
The following is from the spec: