Fluid grids are less complicated than you think

Posted by on Jan 8, 2012 in CSS | 0 comments

I’ve been trying to find a solution for creating fluid grids (and layouts for that matter). The problem with fluid grids is the box model in the browser. When you have fixed-width grids you can easily calculate the right width of a column. But with fluid grids that is not possible (yet). If you set the column width to 25% and you need 2.5% left/right margin the total width of the box will be 30% of the container.

If you try to use negative margins and increase the width of the container (like some fixed-width grids are doing) the browser breaks down. In the example above you’d need to increase the width of the container to 105% and redo the computations for the grid boxes. The grid boxes will have a 2.5% left/right margins and a width of 21.25% (105%/4 – 5%). The math becomes more complicated for 16 column grids or for nested grids. I tried it but the browsers do not behave consistently so, even if you are willing to struggle with the math, I don’t think this is a viable solution.

Stepping back from this problem I realized that the complexity of this problem is generated by the desire to have the left margin of the first column exactly aligned to the left margin of the container and the right margin of the last column exactly aligned to the right margin of the container. But if you stop and think about it, when you want to use a fluid grid/layout you’re not working with a, lets say, 960pixels wide container. So, even if the container is the BODY tag you still need some kind of left/right margin so the content doesn’t touch the margins of the browser window.

Since you must have those margins you can use those margins to help you with the problem. Let’s say, inside the BODY tag, you only have a 4 column fluid grid, each column being 25% in width. That is perfectly possible in any modern browser. Since the first and last columns in the grid must have a left and right margin, so that their content don’t reach the window’s margins, you must make sure that the content of the columns will have left/right margins. That can be achieved easily via CSS using child selectors. All you need to make sure that the columns will have only block-type elements. Which that happens most of the time; there are very few occasions when you have text or inline elements in columns)

This is a WordPress blog and the side bar contains only block type elements with class “widget” and the main area contains only block type elements (headings and divs for the articles) so it’s easy to see how a fluid layout (75% for the main content and 25% for the sidebar) can be achieved on this blog.

The only caveat with this approach is that, since the content of grids will have a left/right margins relative to the grids container you must make sure that the rest of the children of the container must employ the same margins.

But enough with the theoretical mumbo-jumbo. I’ve created a set of LESS mixins that can help you create fluid grid/layouts. Check out the project page.

Read More

Letting go of responsive grids, responsibly

Posted by on Dec 3, 2011 in CSS | 2 comments

Recently I’ve been trying to find a grid system for responsive design. In an ideal world, you could have your fluid layout and grid it too. But this is not an ideal world. There are different attempts to achieve fluid and flexible grids (what I call by “responsive grids”) like the Semantic Grid System or the 960 fluid grid. They fail because each browser has it’s own way of rounding the percentage-based math and you end up with significant white space at the end of the column. Obviously that’s not a solution.

Andy Clarke, in his “Hardboiled CSS” book, talks extensively about how a website shouldn’t look the same in all browsers, going so far to deliver only a basic stylesheet for IE6. Many designers and developers, myself included, agree with his reasoning. ┬áBut just like myself, other developers have been trying to find the holy grail of responsive design, the responsive grid even though that contradicts Andy’s reasoning. I mean, we are willing to give IE6 users an experience significantly reduced compared to other users, right? So why would we even attempt to cater for people that have, for whatever reason, their browser window set to, let’s say, 944 pixels when their monitor is 1024 pixels wide when most of the people on that screensize have their window maximized and we can safely use a 960/980 pixels grid? I bet these users are fewer than IE6 users. The same goes for people that have their browser window set to a size that is not a common screen width.

Andy Clarke says we should let go of trying to achieve designs that look the same in all browsers because not all browsers are created equal. But not all browser windows are created equal so we shouldn’t try making fluid grids either. Or we should. But just not using the traditional approach anyway.

First solution: Think outside the grid!

The Fluid Baseline Grid creates truly responsive grids but only because it’s not a grid as we are used too (12/16/18 columns) but because it limits the grid to 3 equal columns for which the browser math is more exact and the gap between the last column’s right margin and the right margin of the grid container will always be acceptable. And if you really want to have perfect alignment you can have the 3rd column float to the right.

As long as you stop thinking “I have a 16 column grid, the left side will have 4 columns and the right will have 12 columns” you can achieve flexible grids. Your responsive design will look like this

instead of

This way, later on, if you need a 3 columns row in the #main section you can have the 3rd column right-aligned with the main content no matter what the actual size of the browser window is (that is, until a media query may be used to display those 3 columns one after another). This accuracy cannot be achieved with any of the flexible (and classical) grids I have found. If you know one let me know.

Second solution: Think outside the window!

Outside the window it’s the screen. No, I don’t mean to start writing your media queries based on the screen width but to assume that the browser window is maximized and design fixed-width layouts for specific screen resolutions. I have to mention Andy Clarke with his excellent project, 320AndUp.

Doing fixed width layouts you can achieve pixel perfect precision but you will not have a fluid and flexible grid. Consider the following scenario: a user has a 1280 pixels monitor but his browser window is set to 960pixels. Using the 320AndUp screen size breakdown the user will use the 768 pixels style-sheet and you will deliver a fixed width design (let’s say 750). That user will have 105 pixels of empty space around it’s design but it will be a pixel-perfect design, different boxes will be aligned perfectly. You can still have your 16 column grid and make it (sort of) responsive too. I think it’s a small price to pay.

From this point of view the Simple Grid project is an almost perfect solution. The only caveat is that it’s not semantic but for that we have the Semantic Grid.

I’ve created something quickly to show my approach to solving this problem. It’s a rough draft but I think it has all the ingredients to become a viable solution. I will set up a GitHub repository for this as soon as I test it more thoroughly.

Download ZIP file Read More