px must match the units of the grid width

[arnoldbird]

I'm seeing this error...

WARNING: The layout cannot be calculated correctly; when using gutter-method: margin, the units of the gutter (px must match the units of the grid width (%).

I don't understand how a layout could be responsive if the grid width is set to px rather than %. I suppose "responsive" could mean anything, but it seems to me that for most applications the grid must be fluid width, even if gutters are not fluid.

[JohnAlbin]

What would you prefer the error message to be?

I don't understand how a layout could be responsive if the grid width is set to px rather than %.

The error message does not say you have to have a px-based grid width. It's trying to say you have to have the same units for gutter and margin. If you choose px for both, you will have a fixed-width layout. If you choose % for both, you will have a responsive layout.

[arnoldbird]

There's nothing wrong with the error message. I mentioned the error message only because it makes it plain that your intent as a developer was/is as you described in your comment just now... that the layout can have variable width cols and gutters, or fixed width cols and gutters, but not a mix of the two -- at least not when the gutter-method is margins.

So, I understand that that's your intent, but I find that in practice, what's really needed for most responsive layouts is a combination of fixed width gutters and variable width columns. For the project I was working on in February, I ended up using the 'padding' gutter method so I could have fixed gutters and variable columns. The holy grail, I suppose, would be 'margin' gutter method with fixed gutters and fluid columns. I know we expect a lot from free software sometimes! Many thanks.

[JohnAlbin]

I mentioned the error message only because it makes it plain that your intent as a developer was/is as you described in your comment just now

Actually, my intent as a developer is to not violate the laws of mathematics. ;-)

You are trying to use both gutter-method: margin and a fixed-width gutter like gutter-width: 20px while also using a responsive layout (which means $zen-grid-width: 100%). Let me do the math for you:

Given a 4 column grid, each column will be 25% wide. So you'll have 4 columns and 1 gutter between each column.

total width = column widths + gutter widths

total width = (4 * 25%) + (3 * 20px)
total width = 100% + 60px

Oops. You now have a horizontal scroll bar because the total width is greater than the screen size.

Right now, your options are to either:

• Switch to gutter-method: padding (the default)
• Switch to gutter-width: 5% (using percentages for both gutter and grid size)

I prefer the first option, which is why it is the default.

[JohnAlbin]

I just opened a feature request which might do what you want. #82 I won't have time to work on it for free any time soon.

[JohnAlbin]

Actually, we should add this rationale to some docs.