Hacker News new | past | comments | ask | show | jobs | submit login
Fluid Grids (alistapart.com)
27 points by naish on March 3, 2009 | hide | past | favorite | 5 comments



Very interesting. Sounds much like Typogridphy:

http://csswizardry.com/typogridphy/

I've been experimenting with that as well as the 960 grid CSS sets. Really quite handy


Judging by the page itself, Typogridphy isn't a fluid layout.


They're getting there, although this article doesn't show how to combine fluid and fixed-width columns.


doesn't show how to combine fluid and fixed-width columns

Maybe because this quite nightmarish (yes, I've tried) and they didn't want to ruin their premise. Generally the magic falls apart as soon as images get involved or when you need to align something pixel-perfectly - which also mostly happens when you want images to line up.

I'm very fond of the idea - but not so fond of the possible implementations (including this one) that I have tried. The math alone drops you into the funky realm of rounding differences between the browsers. Values like 14.575% just don't come out the same in every browser and it's a bit of a gamble whether you'll be able to fix the resulting uneven gaps or not.

There's also the issue of font-rendering. Most fonts are optimized for a few standard point sizes and develop a nasty blur or bad kerning when you start sizing them with em's or percentages instead of hard pixel values. The aforementioned rounding variances make it near impossible to have, say, an 1.4em helvetica (relative to a 75% container) look crisp on all platforms.

So far I have yet to see a grid-based fluid layout with images that actually looks convincing across browsers and platforms - without requiring kilobytes and man-months of CSS hacks.

Over here we've had good success with pixel-based grids for graphics heavy sites and fairly simple, albeit markup-dependant, approaches like Malo for liquid layouts. We've also used the "holy grail" for n-column layouts but found that to become a maintenance-hassle over time.


If you want fluid and fixed columns you can use <a href="http://code.google.com/p/emastic/">Emastic CSS Framework </a> This article is all about Emastic because is fluid and em based.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: