Here we are again, you are a UI/UX developer, trying to change the world by showing it the beauty of CSS3 and pleading "please stop wars and end famine, so we can all appreciate beauty ..."
So, you've gotten that UI right, especially the grid. The grid was a breeze. Bootstrap grid makes life easy. But then, the Angular Guy finishes binding server data, and the grid comes back looking uneven because some text are much longer than others, resulting in some grid elements feeling inferior to others.
If there was a read more functionality, it'd be easy. Truncate the text at some point, and slap a hyperlink to redirect to some page. But what if there isn't?
So you whip out that light saber, all knowledge of CSS you have accumulated over the years, and it's a really long and experienced not-so-light saber. And after all the heights and max-heights, you still can't figure out what to do to bind the heights of multiple div elements to their maximum height.
<div class='col-sm-4' bind-height='grid-element'></div>, and all elements with
[bind-height='grid-element'] will have their heights bound to the height of the "tallest" element.
Also, feel free to update the attribute value dynamically using ng-repeat, or from your server-side environment.
So, with less worrying, you now have more time to sip your tea, file those nails, and do whatever UI/UX people do once their CSS is beautiful.
PS: I assume it involves a mirror and some wax (don't ask)