There are still some things that are impossible to achieve with CSS alone, even if you have the luxury of only needing to work with evergreen browsers (remember we are speaking of content-heavy sites here, which are the most prone to still have to support older browsers).

Example: I have a stack of boxes of varying heights. On mobile they are fine as is (one below the other). On tablet I want them in two columns but displayed in column order without gaps. On desktops I want three columns. This is dynamic data, so the number of items and their heights will vary, but my CMS allows the user to mark at which box(es) new columns should start:

  mobile  tablet  desktop
  a       a  c'   a  b* d*
  b*      b  d       c
  c'
  d*

' indicates this element starts a new column for tablets (two-column layout)

* indicates the element starts a new column for desktops (three-column layout)

Can you achieve this with HTML/CSS alone? How?

- CSS columns won't work because Safari doesn't support break-brefore in a columns context.

- Flexbox won't work because you don't have a defined height for the container (so you can't use flex-direction: column + flex-wrap).

- CSS grid won't work because you'll get a grid (i.e.: gaps between elements when the boxes have varying heights).

- Ye-olde-floats won't work because you'll get weird gaps too when the sizes change.

- You cannot wrap the elements in column-divs because you can't do it for both tablet and desktop simultaneously.

Also, you need to be very confident in all of the above to know that is is not possible, instead of getting sucked into trying, getting to an "almost there" point and then realizing it doesn't work under X condition.

In contrast, with React you can just generate 1/2/3 wrapper divs depending on whether the current width is mobile/tablet/desktop and call it a day. It takes you all of 5 minutes to do so and the margin for surprises is 0.

Edit: reworded why flex won't work to address nawgz's comment.

I would tend to use grid for this, and no, I wouldn't use HTML/CSS alone, if there's a dynamic dataset. The intent with my comment is you don't need to render different views entirely, but that there are CSS tools (col-span-1, 2, ... ) + grid that work really well.

That said, I also don't have to support older browsers. We're content heavy, but traffic is so small from Safari, older IE, etc. so we're fine with using newer features.

What about 'order' attribute?

https://developer.mozilla.org/en-US/docs/Web/CSS/order

Also if css can't do it why go you need react when you can do it in few lines of css? Not not difficult to rearrange elements based on viewport size.

>Flexbox won't work because you don't have a fixed height

Are you saying the issue is that flexbox will force everything to have the same height? I am relatively sure that `flex: 0 0 fit-content;` on the children and `flex-wrap: wrap; flex-direction: column;` on the parent will do what you want

> Are you saying the issue is that flexbox will force everything to have the same height?

No, I'm saying that you will not get columns unless you specify a fixed height for the container. Since you don't know the total height you want for the container, this is not a valid solution.

Ah yeah, I see your point. Fair enough.

However, if you're already using wrapper divs, it seems to me like you do some math on your boxes after the initial render to balance them. Either that or you literally just group them into 3 groups and accept whatever artifacts (read: column height mismatches).

Either way, there is a CSS-only solution of sorts. Render the parent with 0 height, iterate over the children groups to find your max column height (remember - you already do this grouping with your wrapper divs), set your component height to your max of the 3 groups with 200ms transition, and you have a sweet CSS-only animated solution

Might not be worth it - in my approximation it's not - but I guess that could depend on your domain.

Hmm, why did the CMS allow for such a setting in the first place? It seems to me that allowing this is the problem... But this might be a structural/org-political that you have to solve then

If you don't have to build a webapp just use Webflow