There's a recent trend in web design to use dynamic grids for just about everything these days. By "dynamic grid" I mean things like Pinterest, where variable length tokens flow infinitely vertically, and are in X columns.

While this has proved to be a wonderfully beautiful and unique design for an image-based site such as Pinterest, many designers are starting to pick up the trend in text-based sites.

A good example of what a text-based dynamic grid would look like can be seen here: http://masonry.desandro.com/demos/basic-multi-column.html

That example is particularly bad, but it perfectly shows my point. As I'm sure you UX gurus know, the natural tendency is for the human eye to read left-to-right and top-to-bottom. With a dynamic grid layout, left-to-right doesn't necessarily work because the content to the right of where you're reading may not be exactly where your eye is expecting it to be.

So, the natural tendency for me is to continue reading down the column - this turns out pretty bad because then I'll infinitely read one column, and never move to the next column without a conscious realization of what I'm doing.

My question is; Is there an effective way to use a dynamic grid layout and still maintain readability and good UX?

There's a recent trend in web design to use dynamic masonry grids, like Pinterest, for just about everything these days. If you haven't seen such a layout before, it presents content of variable height organized in a number of columns of fixed width so it looks like a brick wall turned sideways.

While this has proved to be a wonderfully beautiful and unique design for an image-based site such as Pinterest, many designers are starting to pick up the trend in text-based sites.

A good example of what a text-based masonry grid would look like can be seen here: http://masonry.desandro.com/demos/basic-multi-column.html

That example is particularly bad, but it shows my point perfectly. As I'm sure you, UX gurus know, the natural tendency is for the human eye to read left-to-right and top-to-bottom. With a dynamic grid layout, left-to-right doesn't necessarily work because the content to the right of where you're reading may not be exactly where your eye is expecting it to be.

So, the natural tendency for me is to continue reading down the column - this turns out pretty bad because then I'll infinitely read one column, and never move to the next column without a conscious realization of what I'm doing.

My question is: Is there an effective way to use a masonry grid layout and still maintain readability and good UX?