Bug on (nested) Fluid Grids about adapt HOT 4 CLOSED

Yeah, the fluid version is percentage based, so it doesn't work very well with nested grid units.

I just used this site to generate that version: http://grids.heroku.com

That's not to say the generator is flawed, just percentage based widths aren't very reliable.

Example:

http://www.slideshare.net/nathansmith/refresh-okc/68

Versus:

http://www.slideshare.net/nathansmith/refresh-okc/69

Same code, different browsers. Some round up, others round down.

from adapt.

Hi Nathan, thanks for the quick reply.

I'm aware of the rounding issues between different browsers, AFAIK the error offset will never be higher than 1% (or one pixel in most cases - unless you have a really huge resolution) but that would hardly be noticed by the naked eye... In this case the error offset can be as high as ~90%: if you have a grid_1 inside a grid_2 its width should be 48% and not 6.333%.

I've worked out a solution (see http://jsfiddle.net/jmSRu/) - I'm not sure if it's 100% correct but it seems to work. I've only patched a couple of combinations since a complete patch would require much more code and time but IMHO it's worth it, otherwise I don't see any reason to rely on the fluid version if nested grids are being used.

.grid_8 > .grid_4 {
    width: 48.0%;
}

.grid_8 > .grid_4.alpha, .grid_8 > .grid_4.omega {
    width: 49.0%;
}

.grid_9 > .grid_3 {
    width: 31.333%;
}

.grid_9 > .grid_3.alpha, .grid_9 > .grid_3.omega {
    width: 32.333%;
}

.grid_9 > .grid_6 {
    width: 64.666%;
}

.grid_9 > .grid_6.alpha, .grid_9 > .grid_6.omega {
    width: 65.666%;
}

I'm sorry for insisting on this issue but I got the impression that my point didn't get across clearly.

from adapt.

I get it, all I'm saying is that I didn't create the fluid version, so I can't vouch for it's production readiness. I threw it in as a proof-of-concept, but the real point of the Adapt.js demo isn't the CSS – I just wanted to show that the JS could be used to swap files on-the-fly.

I can put you in touch with the guy who created that generator site, if you like.

If you need nest-able fluid grids, YUI3 has one that's pretty solid...

http://developer.yahoo.com/yui/3/cssgrids

Demo:

http://host.sonspring.com/yui3_grid

Also, the OOCSS grid is fluid:

http://oocss.org/grids_docs.html

I've been meaning to do a write-up of how I'd approach fluid grids, but haven't had the time lately.

from adapt.

I understand, just making sure we were on the same page. :)

In case anyone else is interested, I coded a script to do the math and patch the adapt.js version of the VGS fluid variant (12 columns) - the resulting CSS is available at https://gist.github.com/1079728.

from adapt.