[donatj]

> Adding a border changes the size of the items, which might not be desirable

This issue has been addressed for well over a decade.

Is the first line of everyone's css files not just:

    * { box-sizing: border-box; }

That makes borders figure on the inside of the width rather than the outside. It's far more sane to reason about.

[do_not_redeem]

That does not solve the problem in the article. Consider this layout:

<content1> <content2> <content3>

If you start out with equally spaced columns, and then you add borders to content2 and content3 to end up with this visually:

<content1> <border> <content2> <border> <content3>

The DOM actually looks like this:

<content1> <border content2> <border content3>

Now content2 and content3 are smaller than content1, because the borders are part of their width. Borders are the wrong tool for this job no matter the value of box-sizing.

[yojo]

You just add padding to the items with borders so they visually consume the same space, then increase the width of everything except :first-child to account for the new padding/border. Easy!

That’s sarcasm, obviously. But man, I’ve spent so many hours over the years hacking little lines between HTML boxes.

[yojo]

Oh, and don’t forget to update the styles or class name via JavaScript if you want to support drag and drop without it looking incredibly janky.