Hacker News Reader

> One part of a solution to this problem is to use relative CSS units. Avoid hard breakpoints whenever possible. Only break columns into rows when there is no more space left.

Not sure what you mean. What does "no more space left" mean in practice, and how do you detect it with CSS?

View on HN

Assume you have a number of cards organized in rows and columns. You could define how many columns to show between each breakpoint using several media queries. However, a better approach would be to use a flex container with `flex-wrap:wrap`. Specify `flex-basis` for its children and the browser will automatically wrap them accordingly. No break points needed.

That makes sense, thanks; although I am still not sure it's applicable to the case described in the article, where the author was complaining of the layout grid that changed a three-column layout to a single-column layout. Assuming that we use CSS grids for layouts, and grid's cells don't wrap, I can't imagine how one can manage without a media query that will change the number of the grid's columns. Which will cause an abrupt change in the layout, which is, if I understand the author correctly, something he doesn't like.

Use a float grid which may flow ugly, or native CSS Grid which allows child elements to dictate their own min- and max-sizes.

Reply on news.ycombinator.com