
CSS Grid the Right Way - vvviolet
https://vgpena.github.io/using-css-grid-the-right-way/
======
stupidcar
Recently I've been using CSS Grid to layout quite a complex component, where
the number of rows and columns needs to by dynamic based on the component's
input data.

I've consistently been surprised by the fact that, everytime I hit a
requirement that I think is going to be be impossible or require a hack, I
find that it's a use-case that's been considered and catered for by the spec.

If flex was the first CSS layout that didn't feel like it was actively hostile
to the functional needs of building UI, then grid is the first one that feels
like it genuinely considers both functional needs and the needs of writing
elegant and maintainable cdoe . I agree with the article that it requires
quite a bit of learning to absorb all the new terminology and concepts, the
payoff is more than worth it.

------
raidicy
Well written article with first principles in mind. I would like to mention
that in the section where the author talks about placement there's a hiccup.
When you place grid items with grid-column:start/end, start refers to the
starting column _line_ and end refers to the ending column _line_. Not the
columns themselves. If you look at [1] you can see there's 3 columns but the
ending is at '4'.

Funnily enough this doesn't apply to spanning.Notice here with grid-
column:1/span 3 it spans the length of 3 columns. [2]

These details perfectly illustrate the authors excellent point of using named
template areas and placing items semantically. I apologise if this is
pedantic, I really did like the article.

[1][https://jsfiddle.net/9ewzLcrs](https://jsfiddle.net/9ewzLcrs)
[2][https://jsfiddle.net/9ewzLcrs/1/](https://jsfiddle.net/9ewzLcrs/1/)

~~~
kreetx
This _is_ a great article! A good assessment of how the grid might be used to
cause less mental strain for the developer. I've just started using grid in
practice, although already very useful then this article adds good insights
into naming things and also on the design vs markup topic.

If I may nitpick on your nitpick :), then I don't think span isn't "funnily"
not the same as the start/end columns -- if you want to span some number of
columns then it shouldn't say "span 2" when you mean to span one.

------
porphyrogene
Some of this seems a little obvious to me but I may have been spoiled by Grid
By Example[1] being my tutor. This article does not get into grid areas which,
if used, should be the entities that are named rather than columns and rows.
Whenever people complain about CSS and the lack of a reusable specification
for GUIs I bring up CSS grid. Paired with CSS Reset[2], we have an intuitive,
descriptive and easy-to-learn means of building layouts that just works.

1\. [https://gridbyexample.com/](https://gridbyexample.com/)

2\.
[https://meyerweb.com/eric/tools/css/reset/](https://meyerweb.com/eric/tools/css/reset/)

------
optevo
I really appreciate this article. CSS grid has a lot of moving parts and it's
great to have some simple and practical best practice guidelines. Well done!

------
beefalo
I'm really digging this site design.

