When it comes to grid-based web design, one of the most charming and peculiar grid structure example that occurrs to me it’s UX Magazine‘s layout.

The square-based structural balance of this layout it’s quite obvious but it could have turned out annoying and boring if designers didn’t conceive some visual tricks that, breaking the grid integrity, would create surprise and regain user’s attention. Merging two or more units to create rectangular spaces is one of them and for sure the upper-left corner of this page has been astutely designed: when you see for the first time this page, the red colour grabs your attention so the eye, following the ascending red lines, reaches the photograph that unrolls its text horizontally across the grid units.

Another  smart idea is the quotation call-out box: as in the aforementioned example, I think that the eye movement starts from the bottom, from the photograph I mean, that makes itself very visible for breaking the chain progression of text boxes, and then it goes up to reach the rectangular baloon with the blue outline and the citation text.

In the end I think that you can see this layout  as a sort of a big, typographic Tetris game, where every major graphic assest falls exactly into place.