CSS Grid the Right Way | Hacker News Reader

CSS Grid the Right Way

vgpena.github.io

117 pointsvvviolet6 comments

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.

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 [2]https://jsfiddle.net/9ewzLcrs/1/

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.

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/

2. https://meyerweb.com/eric/tools/css/reset/

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!

I'm really digging this site design.

Reply on news.ycombinator.com