And the reason to use this over built-in CSS grids is...
All CSS grid properties are defined in terms of grid "lines", not cells. If you have a grid of 2x2 cells, there are actually 3 vertical lines and 3 horizontal lines:
1 2 3
1 ┌─┬─┐
2 ├─┼─┤
3 └─┴─┘
"grid-column-end: y" means "this area ends at the y vertical line"
As you can see, there is no possible ambiguity here on whether you mean "inclusive" or "exclusive" like there would be if you referred to cells (which is why you had this question). That's the reason they chose to go with the "lines" model.
> In fact where there is a ressource for understanding css logic on the internet?
Usually each CSS spec has a rationale and some introduction to the "why" and the "thinking model" of the spec. For CSS grid you may look at [1].
It isn't as optimal a layout system as you can get with javascript but generally so long as all elements are at least half the height of other members of a row it doesn't look offensively bad. And there is room for more sophisticated layout algorithms in the future.
And it generally isn't that hard to pad grid items to be multiples of a common height so they can organically fill consistently.