How to reproduce the problem:

  1. Set the layout to fixed-width in the info file
  2. $zen-column-count: 24; $zen-gutter-width: 20px; $zen-grid-width: 960px;
  3. box-sizing: border-box (htc file downloaded, path set, definition to content-box commented out)

Write into blocks.scss

.block {
  @include zen-grid-flow-item(8);
}

Result in block.css

.block {
  (…)
  width: 800%;
  (…)
}

Did I made a mistake in my scss definition? The documentation says when fixed width is used, the only attribute is must define is the number of columns.

I try to analyze the math in _grids.scss of Zen, but it is a deeply cascaded formula… :o)

Comments

thamas’s picture

thamas
Primary language Hungarian
Location Hungary
CreditAttribution: thamas commented

Hm. Math seems to be right. So I do not know where the problem lies.

Tunox’s picture

Tunox CreditAttribution: Tunox commented

According to Grid generator your total width should be 964px. 960px won't add up for 24 columns with a 20px gutter.

Are you editing the scss in compass "mode"?
The good thing about using sass/compass is that when you toy around with zen-grid-width and save the file, the console/terminal will tell you if there's something wrong with the grid measures you're trying to apply.
If you haven't installed Ruby/SaaS/Compass, do it. Took me 5 minutes in Windows. Should be less on *nix flavour OS.

thamas’s picture

thamas
Primary language Hungarian
Location Hungary
CreditAttribution: thamas commented

Dear Tunox,

It is a 24 column grid with 20px wide columns and 20px wide gutters.

Sass and Compass are installed and Compass is watching the folder of the theme, of course. The css generated by Compass.

thamas’s picture

thamas
Primary language Hungarian
Location Hungary
CreditAttribution: thamas commented

OK, I missed that there are warnings in the terminal. It had a problem widh IE legacy support and polyfill path, but it should be an other issue, so I just switched back to default settings: no polifyfill and box-sizing is set to content-box.

However it still has a warning:

WARNING: For responsive layouts with a percentage-based grid width, you must set the $column-count to the number of columns that the parent element spans.
on line 252 of [… deleted by me …]/sites/all/themes/custom/trezen/sass-extensions/zen-grids/stylesheets/zen/_grids.scss, in `zen-grid-flow-item'
from line 10 of [… deleted by me …]/sites/all/themes/custom/trezen/sass/blocks.scss

The px unit setting (960px grid) seems to be not recognized. If I set the grid width to 960px and the column-count to 24 in _grids.scss (what I normally should not do, I know…) it works correctly.

JohnAlbin’s picture

JohnAlbin
he/they/他
Primary language English
Location Taipei, Taiwan
CreditAttribution: JohnAlbin commented
Version: 7.x-5.1 » 7.x-5.x-dev
Priority: Normal » Major
echoz’s picture

echoz CreditAttribution: echoz commented

Is this addressed by “bugfix: Incorrect gutter for zen-grid-flow-item() when using fixed units.” which was the last commit to compass-zen-grids on github (Jun 25) that never made it to zen.

JohnAlbin’s picture

JohnAlbin
he/they/他
Primary language English
Location Taipei, Taiwan
CreditAttribution: JohnAlbin commented
Status: Active » Closed (duplicate)

Likely. See #2052291: Upgrade to Zen Grids 1.4

denix’s picture

denix CreditAttribution: denix commented

I have upgraded to zen-grids 1.4 but the problem persists. :(
I have just realized that version 1.4 is from april this year and the bug has been addressed in june.

denix’s picture

denix CreditAttribution: denix commented
Status: Closed (duplicate) » Active
JohnAlbin’s picture

JohnAlbin
he/they/他
Primary language English
Location Taipei, Taiwan
CreditAttribution: JohnAlbin commented
Issue summary: View changes
Status: Active » Closed (duplicate)