5 ms·
> 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 m
by azangru 6y ago
> 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?
- eurasiantiger 6y agoUse a float grid which may flow ugly, or native CSS Grid which allows child elements to dictate their own min- and max-sizes.
- FrontAid 6y agoAssume 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.
- azangru 6y agoThat 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.