I know word-wrap: break-word was something I tried and if I remember correctly, it didn’t work.
When I was staring at the page, I noticed little quirks about the layout with the employee cards, and tried a few things but nothing really seemed to make a difference. I showed the page to my superior and she said to just leave it. It’s more work to try and fix the problem than it’s really worth.
I don’t have a lot of experience implementing a grid layout, but I’ve read probably more than I should about how to implement them. I’m working in an internal site that’s built with vendor software. I can add CSS to pages, but it’s pretty awkward, and the HTML are only snippets (no head, body, etc.). I didn’t like the vendor’s implementation of a grid layout because the naming conventions they used for their CSS would get confusing very fast. I like the “sizeXofY” convention because it’s very specific and leaves less room for confusion when writing the HTML.
But I agree, float-based grid layouts are finicky. I had to add more <div class="u-clearBoth"></div> than I would’ve liked to make the layout flow better. I may look at something different when this project is finished…