I'm redesigning a page, and am going for a fairly basic fluid, 2-column layout. With a fluid layout though, should I have my gutter and margins expand along with the columns, or would it be better to keep them a static size regardless of how the user resizes their browser?

I'm applying the Golden Ratio to the column width so I would like to apply it also to the gutter/margins but I don't really see how that could be done without them being HUGE (or at least huge for gutters. If they're static size it's a moot point of course.


1 Answer 1


I don't think there is a hard-and-fast rule (or "best practice"), but, shooting from the hip, I don't think you should expand the gutter.

The general pattern in the wild is that you have discrete elastic sections that expand, and everything else maintains it's relative position. I can't seem to find a live example on the web in my quick searching (though Ethan Marcotte's seminal ALA breakdown of fluid grids does a little of it at extremely small window size). Amazon.com, Gmail, and Google News all maintain consistent margin/gutter spacing as they stretch.

"Everybody else does it" is not necessarily a reason to follow suit, but, instinctively, this feels a little more stable and consistent to users - there are less moving parts than if every element changes dimension. It's a little more self-explanatory of the mechanism, perhaps? Also, it looks less like actual browser zooming.

You could make a case for expanding them ever-so-slightly as the page width increases - certainly not in direct proportion with the width - but I doubt that subtle effect is worth the additional complexity.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.