johnalbin / zen-grids

A Sass module to build responsive grid systems

About Zen Grids

Zen Grids is an intuitive, flexible grid system that leverages the natural source order of your content to make it easier to create fluid responsive designs. With an easy-to-use Sass mixin set, the Zen Grids system can be applied to an infinite number of layouts, including responsive, adaptive, fluid and fixed-width layouts.

More information can be found at http://zengrids.com

USAGE

Here's a simple example: a content column with a sidebar on each side, aligned to a 12 column grid.

  @import "zen-grids";

  $zen-gutters: 40px;  // Set the gutter size. A half-gutter is used on
                       // each side of each column.

  .container {
    @include zen-grid-container();  // Define the container for your grid items.
  }

  $zen-columns: 12;  // Set the number of grid columns to use in this media
                     // query. You'll likely want a different grid for
                     // different screen sizes.

  @media all and (min-width: 50em) {
    .sidebar1 {
      @include zen-grid-item(3, 1);   // Span 3 columns starting in 1st column.
    }
    .content {
      @include zen-grid-item(6, 4);   // Span 6 columns starting in 4th column.
    }
    .sidebar2 {
      @include zen-grid-item(3, 10);  // Span 3 columns starting in 10th column.
    }
  }

Within the .container element, the .sidebar1, .sidebar2 and .content elements can be in any order.

INSTALLATION

Install using one of the following methods:

• Install with npm: npm install --save-dev zen-grids
• Install with Bower: bower install --save-dev zen-grids
• Install with Ruby Gem: gem install zen-grids
  and, if using Compass, add require "zen-grids" to your config.rb file.
• Install with Bundler and Ruby Gem: bundle inject zen-grids '~> 2.0'

You can then start using Zen Grids in your Sass files. Just add this line to one of your .sass or .scss files and start creating!

@import "zen-grids";

REQUIREMENTS

Now works with libSass or Ruby Sass!

• LibSass 3.2.5 or later
• or Ruby Sass 3.4.0 or later

LICENSE

Available under the GPL v2 license. See LICENSE.txt.

zen-grids's Issues

Calculations are wrong by a factor of 10

This is more than likely a mistake by me, but the generated css has sizes 10 times too big.
See
https://gist.github.com/2567350/dfdcd26668f9d15b309c03e2854aa0e0262b3712
http://dabblet.com/gist/2567350
I've added the markup, css and scss

Any tips appreciated!
Alan

Rename zen-grid-item()'s $auto-include-grid-item-base parameter to $include-base

If a user specifies the $auto-include-grid-item-base parameter in the zen-grid-item() mixin, it's not being automatically included, its being explicitly included.

Something not quite right

Hi John
Using Zen grids and menu block [Drupal] to try achieve the layout
https://skitch.com/alanburke/ef98p/skitched-20120710-234717

but it ends up like
https://skitch.com/alanburke/ef98t/skitched-20120710-234748

SCSS at http://pastebin.com/smDm4Gi9

It must be something silly I'm doing wrong...

zen-grid-flow-item documentation

I am still trying to wrap my head around how zen-grid-flow-item is intended to work.

This was my first approach:

.wrapper {
  @include zen-nested-container();
  width: $zen-grid-width + $zen-gutter-width;

  .item {
    @include zen-grid-flow-item(6);
    @include zen-float(left);
  }
}

It works. But its an ugly solution. E.g. It can cause scrollbars. And more importantly: It does not allow to use Zen Grids the way why i am using it in the first place: You can't mix unit between grid width and gutter width. So I came up with this solution:

@include zen-grid-flow-item(1, 2, false, false);
@include zen-float(left);
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
&:nth-child(odd) > * {
  margin-right: $zen-gutter-width/2;
}
&:nth-child(even) > * {
  margin-left: $zen-gutter-width/2;
}

It's really ugly and inflexible as It is. But it works. This is really my first draft of that stylesheet. I just bumped into this solution and thought I'd share it since many other people have the same problem on the discussion on the Zen Grids website.

John, please give some feedback on this!

Add short-names module with mixin names that are shorter than the defaults

This migh sound like a stupid question, but I've got some elements where I'm using zen-clear() for some pages, but then in one particular page I need to remove the zen-clear() statement cause it's causing problems. I've got a SCSS file for that page but am wondering how do I negate the zen-clear() mixin?

It gets inherited from the other css since it's only a small change I don't want to redo the whole page for just 1 element.

Thanks.

Allow setting of grid-items without declaring position

Just a question, could there be a way to perhaps only include the columns spanned by an item and just floating it, instead of having to always declare from which column it starts? list items for navigation, for example, are a little difficult to handle with this.

zen-grid-item() fails to use explicit params when $zen-auto-include-grid-item-base is false

If $zen-auto-include-grid-item-base is false, the zen-grid-item() mixin will fail to set any gutters even if they are explicitly passed to the mixin.

Problems converting zen sub-theme to zen-grids 2.0.0.beta.1

Hi John -

I have a zen (7.x-5.4) sub-theme I am trying to upgrade to zen-grids 2.0.0.beta.1. No luck. I am missing the following variable and mixins:

$zen-reverse-all-floats
@include zen-nested-container();
@include zen-clear();

All were used in 'layouts/_responsive.scss'. When I comment the lines out -- you guessed it --- the site layout is a mess. Are there replacements for these items in version 2? Or should I bite the bullet and actually figure out what's going on?

Aloha, Beau.

Can't right-align content, please help.

I really lke Zen Grids, thanks for creating this. But I have a problem I can't quite figure out. I have 4 elements that I want to arrange, the first 2 on the left, the other 2 on the right. They are divided in pairs inside divs. But I also need them to never overlap (any of the items), even when you shrink the window.

In Zen grids I have:

.left-div { @include zen-grid-item(3,1) }
.right-div { @include zen-grid-item(3,4) }

Which works fine as far as overlapping goes, but the right edge of the right-div element is not aligned right, it is aligned left. See image below

This is true, even if I do:

.left-div { @include zen-grid-item(3,1) }
.right-div { @include zen-grid-item(3,1, right) }

I simply cannot get that right element to align to the right.

Any help would be greatly appreciated. And thanks again.

Center an image

Ok, another stupid question, how do you center elements? In the following image I have:

.main-container {
  width: 100%;
  $zen-column-count: 3;
  @include zen-grid-container;
  margin: 0 auto;
}

.title { @include zen-grid-item(3,2) }
.map { @include zen-grid-item(3,2) }

Yet these 2 items, title and map are not centered (see image). They won't be centered even if I give .main-container a column-count of 1 and do:

.title { @include zen-grid-item(1,1) }

I'm sure I'm missing something.

Thanks

Fundamental question on Zen layout

Just looking at Zen as a solution to sub-pixel rendering woes...

What I'm not grasping from a cursory glance at the docs is how I layout subsequent items. For example, let say I have 6 UI elements in a row. The first (.row-header) should take up two columns, each subsequent row (.select-item) should take one:

$zen-column-count: 6;
$zen-gutter-width: 0%;
.two-one-one-one-one {
    @include zen-grid-container;
    .select-item {
        @include zen-grid-item(1, 3, left);
        &:last-child {
            @include zen-grid-item(1, 1, right);
        }
    }
    .row-header {
        @include zen-grid-item(2,1);
    }
}

However, I actually get each subsequent .select-item showing one under another - how do I set each to follow the other? Or is that a fundamental limitation of this method??

Apologies this is a basic question!

Remove patched-support-legacy-browser() after bugfix in Compass

There's a bug in Compass. See Compass/compass#1524

add examples for variable grids

I'm reading the docs at http://zengrids.com/help/ and really confused about how to make a fluid grid from a set of UL/LIs.

Am I understanding correctly that I need a different @include zen-grid-item on each grid item? If so, how can this work when creating an arbitrary number of items with Views?

zen-grid-flow-item says it doesn't float items, so I'm not sure how to use that either.

I am surely missing something, but not managing to understand how to do this from reading the docs!

Flow items are mis-aligned to grid

There's an error in the calculations of the flow items when using the zen-grid-flow-item() mixin. The problem is that the parent element width is exactly 1 gutter width smaller than the width of the columns it spans. So the % width of the flow items is relative to the wrong measurement.

Spent some time trying to fix this and I believe the following replacement should work.

@mixin zen-grid-flow-item (
  $column-span,
  $parent-column-count: false,
  $alpha-gutter: false,
  $omega-gutter: true,
  $flow-direction: $zen-float-direction,
  $column-count: $zen-column-count,
  $gutter-width: $zen-gutter-width,
  $grid-width: $zen-grid-width,
  $box-sizing: $zen-box-sizing,
  $reverse-all-flows: $zen-reverse-all-floats,
  $auto-include-flow-item-base: $zen-auto-include-flow-item-base
) {

  $columns: $column-count;
  @if unit($grid-width) == "%" {
    @if $parent-column-count == false {
      @warn "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.";
    }
    @else {
      $columns: $parent-column-count;
    }
  }

  $dir: $flow-direction;
  @if $reverse-all-flows {
    $dir: zen-direction-flip($dir);
  }
  $rev: zen-direction-flip($dir);

  // Calculate the item's width.
  $width: zen-grid-item-width($column-span, $columns, $grid-width);
  @if $box-sizing == content-box {
    @if not comparable($width, $gutter-width) {
      $units-gutter: unit($gutter-width);
      $units-grid: unit($grid-width);
      @warn "The layout cannot be calculated correctly; when using box-sizing: content-box, the units of the gutter (#{$units-gutter} did not match the units of the grid width (#{$units-grid}).";
    }
    $width: $width - $gutter-width;
  }
  width: $width;

  // Auto-apply the unit base mixin.
  @if $auto-include-flow-item-base {
    @include zen-grid-item-base($gutter-width, $box-sizing);
  }

  // Ensure the HTML item either has a full gutter or no gutter on each side.
  padding-#{$dir}: 0;
  @if $alpha-gutter {
    margin-#{$dir}: $gutter-width;
  }
  $offset: ($columns - $column-span) * $gutter-width / $columns;
  padding-#{$rev}: $offset;
  @if $omega-gutter {
    margin-#{$rev}: $gutter-width - $offset;
  }
  @else {
    margin-#{$rev}: -($offset);
  }
}

Rename zen-grid-flow-item() to zen-flow-item-width()

Even after moving this to a separate module, I think the name needs to closer align with what it actually does: setting the width of a normal flow item, so that it can be aligned with the grid.

If legacy support is turn off, there's no need for IE CSS hacks

Hi,

I was wondering that if the variables $legacy-support-for-ie7and $legacy-support-for-ie6 are false, there's no need for CSS with hacks like _overflow: hidden; or *zoom: 1;. I think that those rules must be written only if that variables are true.

Add background grid feature

Compass’grid-background mixins are sweet. They use CSS3 gradients to apply a grid background while developing your design. http://compass-style.org/reference/compass/layout/grid_background/

However, I don't see any way to mimic fixed-pixel (or fixed-em) gutter sizes when using box-sizing: border-box;. :-(

Which means we may need to develop a JS-based solution.

Enable the Wiki?

Hi John,

Would it be possible for you to enable the Wiki on the repository? I had some issues regarding nested grid items and their behaviour that I think would be useful to the rest of the community. Or would you prefer that anyone wanting to contribute documentation fork the repo and issue pull requests to you?

Cheers,
Sean

wrong unit width in zen-grid-flow-item() when $grid-width uses fixed length units

When zen-grid-flow-item() is used for responsive layouts, you need to specify how many columns the parent element spans (so that you are calculating the % of the parent element correctly.

But for layouts using fixed length units (em, px, in, pt, etc.), you shouldn't specify the number of columns for the parent. You should just use $zen-column-count.

What is the purpose of "position: relative" in zen-grid-container?

The position: relative that is in zen-grid-container() is just CSS I copied over from the original Zen Columns layout technique I've been using for 6+ years (a technique I developed). I think it was needed for some cross-browser compatibility, but I didn't document it, so I'm uncertain what its purpose is and if it's still needed.

Add possibility of vertical alignment

Something like:

.block-a {
    @include zen-valign(top); 
}
.block-b {
    @include zen-valign(middle); 
}
.block-c {
    @include zen-valign(bottom); 
}

word-wrap: break-word from in zen-grid-item() breaks overflow: ellipsis in Internet Explorer

Hi there,

first of all thank you for this awesome grid system :-)

zen-grid-item() adds word-wrap: break-work automatically to the CSS, which then breaks any of the common methods to truncate text with an ellipsis (like the one compass offers by default http://compass-style.org/reference/compass/utilities/text/ellipsis/)

Of course it only does that in IE, which passes down the word-wrap: break-work to child elements for some reason.

Unfortunately, I don't have an easy solution to offer here; the quick workaround would be to add word-wrap: normal to all elements that should exhibit that truncating behaviour, but I thought I'd raise the issue here in case other people run into the same problem.

Best wishes
Chris

Handle odd-pixel-sized gutters.

Mark Boulton likes to use gutters with odd numbers of pixels, so that he can place a line between columns.

Currently, the mixin divdes hte gutter in half, so you'd have a half pixel in both the left and right padding. Its likely browsers would round them in the same way (either up or down) which means you'd end up with an even number of pixels in the gutter.

We need to make the left gutter be 1 pixel smaller than the right when the total gutter size is set to an odd number of pixels.

wrong unit width when $box-sizing set to content-box

The mixins currently work fine for the default $box-sizing: border-box but fail when $zen-box-sizing is set to content-box since the padding is not properly subtracted from the column width.

Use simplified -100% margins

Currently, Zen Grids calculates how big the margin-right needs to be to exactly reset its “relative edge” back to the container’s left inner edge. But it turns out that is not needed. If you use margin-right: -100%;, the container’s left edge will prevent adjacent siblings from seeing any relative edges that are outside the container.

This site doesn't explain how it works or understand the full potential of the technique, but showed that a simpler variant of Zen Grids works just fine. http://chrisplaneta.com/freebies/negativegrid-fluid-css-grid-by-chris-planeta/ Wish I'd realized this in 2004 when I started using this method. :-)

Basic (50/50) 2 column layout

Hi John, I just wanted to drop in and say thank you for making zen-grids! I'm really enjoying it.

One thing that confused me when I was creating my layout is that a two column side by side layout wouldn't work.

For a 12 column grid I was doing the following:

.container{
  $zen-column-count: 12; // Set the total number of columns in the grid.
  $zen-gutter-width: 10px;
  @include zen-grid-container;
  width: 90%;
  margin: 0 auto;
}
.one {
  @include zen-grid-item(6, 1);
}

.two {
  @include zen-grid-item(6, 2);
}

later I realized I had to do the following to get it to work properly:

.container{
  $zen-column-count: 12; // Set the total number of columns in the grid.
  $zen-gutter-width: 10px;
  @include zen-grid-container;
  width: 90%;
  margin: 0 auto;
}
.one {
  @include zen-grid-item(6, 1);
}

.two {
  @include zen-grid-item(6, 1, right);
}

Can you briefly explain or document why this is, and in what situation you would need to do this?

Thanks again

Empty $box-sizing-polyfill-path mistakenly generates CSS

If $box-sizing-polyfill-path is left at its default, an empty string, it is supposed to leave the polyfill disabled. But it currently still generates HTML:

*behavior: url("");

It should not output that line at all.

Legacy browser variables for Compass.

I just upgraded Compass to a newer version and it looks like Compass changed how it handles legacy browser support.

See http://beta.compass-style.org/help/documentation/tuning-vendor-prefixes/ and http://beta.compass-style.org/reference/compass/support/

This might need to be updated in Zen-Grids

zen-grids 2b1 compile error: "Line 6 of _grids.scss: File to import not found or unreadable: variables"

ruby -v
    ruby 2.1.1p76 (2014-02-24 revision 45161) [x86_64-linux]
gem -v
    2.2.2

gem query --local "sass|compass"

    *** LOCAL GEMS ***

    compass (1.0.0.alpha.18)
    compass-core (1.0.0.alpha.17)
    compass-import-once (1.0.2)
    sass (3.3.0.rc.5)
    sass-mediaqueries-rails (1.3)


git clone https://github.com/JohnAlbin/zen-grids.git
cd zen-grids
git log | head
    commit 93abd2ae233293089a7f0667ddf2d690ee925e94
    Author: JohnAlbin <[email protected]>
    Date:   Fri Feb 28 03:07:21 2014 +0800

        Remove Ruby 1.8.7 from travis tests.

    commit 971ec51adcbb8065b60b6fc8409ca93cd0946804
    Author: JohnAlbin <[email protected]>
    Date:   Fri Feb 28 02:45:38 2014 +0800

touch README.txt
gem build zen-grids.gemspec
gem install zen-grids-2.0.0*.gem
gem query --local zen-grids

    *** LOCAL GEMS ***

    zen-grids (2.0.0.beta.1)


cat config.rb
    environment = :development
    relative_assets = true
    add_import_path "/usr/local/rvm/gems/ruby-2.1.1"
    add_import_path "/usr/local/rvm/gems/ruby-2.1.1@global"
    css_dir         = "css"
    sass_dir        = "scss"
    extensions_dir  = "sass-extensions"
    images_dir      = "img"
    javascripts_dir = "js"
    generated_images_dir = "public/sprites"
    require 'zen-grids'


compass compile --debug-info --force
        error scss/blocks.scss (Line 6 of _grids.scss: File to import not found or unreadable: variables.
    Load paths:
      /srv/www/d7/sites/all/themes/my-zen5/scss
      /usr/local/rvm/gems/ruby-2.1.1/gems/compass-core-1.0.0.alpha.17/stylesheets
      /usr/local/rvm/gems/ruby-2.1.1/gems/zen-grids-2.0.0.beta.1
      /usr/local/rvm/gems/ruby-2.1.1
      /usr/local/rvm/gems/ruby-2.1.1@global
      Compass::SpriteImporter)
       create css/blocks.css 
        error scss/wireframes.scss (Line 6 of _grids.scss: File to import not found or unreadable: variables.
    ...

cat css/blocks.css 
    Syntax error: File to import not found or unreadable: variables.
                  Load paths:
                    /srv/www/d7/sites/all/themes/my-zen5/scss
                    /usr/local/rvm/gems/ruby-2.1.1/gems/compass-core-1.0.0.alpha.17/stylesheets
                    /usr/local/rvm/gems/ruby-2.1.1/gems/zen-grids-2.0.0.beta.1
                    /usr/local/rvm/gems/ruby-2.1.1
                    /usr/local/rvm/gems/ruby-2.1.1@global
                    Compass::SpriteImporter
            on line 6 of /usr/local/rvm/gems/ruby-2.1.1/gems/zen-grids-2.0.0.beta.1/zen-grids/_grids.scss
            from line 3 of /usr/local/rvm/gems/ruby-2.1.1/gems/zen-grids-2.0.0.beta.1/_zen-grids.scss
            from line 64 of /srv/www/d7/sites/all/themes/my-zen5/scss/_base.scss
            from line 8 of /srv/www/d7/sites/all/themes/my-zen5/scss/nodes.scss

    1: /srv/www/d7/sites/all/themes/my-zen5/scss/nodes.scss
    ...

cat /usr/local/rvm/gems/ruby-2.1.1/gems/zen-grids-2.0.0.beta.1/zen-grids/_grids.scss
        //
        // Main module for the Zen Grids system.
        //


    6   @import "variables"; // Import the global variables needed by all of Zen Grids.

Intent behind grid flow items?

@JohnAlbin: While working on the configurable margins issue, I've been having trouble understanding your intent behind the zen-grid-flow-item mixin. Can you provide some real world examples of when/how this might be used? I want to make sure the contributions I'm proposing take this into account appropriately.

Problem breaks layout with columns IE7 with zen-grid-flow-item

Hi,, Iam using this to make 3 columns , its works perfect but not with IE7 its break,,, Anyway to fix it...

Thanks..

My Current files....

in base.sass file
$legacy-support-for-ie6: false;
$legacy-support-for-ie7: false;
$legacy-support-for-ie8: true;
$box-sizing-polyfill-path: "/sites/all/themes/mytheme/boxsizing.htc";

And in my Sass file:
#featured {
@include zen-grid-container();
.featured1 {
@include zen-float(left);
@include zen-grid-flow-item( 4, 12, $alpha-gutter: false, $omega-gutter:true );
}
.featured2 {
@include zen-float(left);
@include zen-grid-flow-item( 4, 12, $alpha-gutter: false, $omega-gutter:false );
}
.featured3 {
@include zen-float(left);
@include zen-grid-flow-item( 4, 12, $alpha-gutter: true, $omega-gutter:false );
}
}

Breakpoint integration

After posting this issue: https://github.com/canarymason/breakpoint/issues/24 We should try to integrate Zen Grids with Breakpoint. I would love this feature...

Nested containers are floats and don't need a clearfix

So the zen-nested-container() mixin should be applied to a grid item if it is also a container to a nested grid.

I originally included the zen-container() mixin as the first line of the zen-nested-container()'s properties. But I realized this is unnecessary.

Since a grid item is floated, it contains all of its children according to the box model. Adding a clearfix to that grid item is redundant and is, effectively, code bloat.

It should be removed.

Document zen-new-row(none) option

The docs don't mention that you can use zen-new-row() to un-do a row at a lower breakpoint, ala: zen-new-row(none)

Lots of Local and Global variables warnings

When running compass watch on a new zen theme I get the following errors:

DEPRECATION WARNING on line 81 of /Users/glenn/websites/oliver/sites/all/themes/oliver/sass/layouts/_responsive.scss:
Assigning to global variable "$zen-column-count" by default is deprecated.
In future versions of Sass, this will create a new local variable.
If you want to assign to the global variable, use "$zen-column-count: 3 !global" instead.

What is the recommended way to override the $zen-column-count in a media query?

It looks like Susy and Singularity get around this by using a mixin to set different variables.

Add ability to turn off grid-item styling

Something like zen-grid-item-off() that removes the styling added by zen-grid-item().

Cannot install with Bower, no version number

Cannot be installed with bower, version field missing in bower.json.

Gives

bower zen-grids#0.0.1       not-cached git://github.com/JohnAlbin/compass-zen-grids.git#0.0.1
bower zen-grids#0.0.1          resolve git://github.com/JohnAlbin/compass-zen-grids.git#0.0.1
bower zen-grids#*           not-cached git://github.com/JohnAlbin/compass-zen-grids.git#*
bower zen-grids#*              resolve git://github.com/JohnAlbin/compass-zen-grids.git#*
bower zen-grids#0.0.1     ENORESTARGET No tag found that was able to satisfy 0.0.1

Add flexible legacy IE support

The current mixins add legacy IE support by using .ie6 and .ie7 classes. This requires that the HTML tag in the markup has conditionally added those classes with IE conditional comments. ala http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ and HTML5 Boilerplate

We need to add the option to use standard IE hacks to add legacy support.

Remove $default-legacy-ie-approach support

There's no reason to use IE conditional classes on IE support properties in mixins. By adding a class to IE support rules, we're making it harder to override (or to know when we need to override) those styles. Since the increased specificity is hidden with the compiled CSS.

With CSS hacks for IE support we can keep the specificity the same. And we're wrapping those hacks within an abstraction that keeps the details away from our source stylesheets.

In documentation - should $gutter-size reference be $gutter-side?

"If the gutter width is in pixels and is an odd number, then $gutter-size: left will return half of the gutter rounded down to a whole pixel; $gutter-size: right will return half of the gutter rounded up to a whole pixel."

http://zengrids.com/help/#zen-half-gutter

Move functions into functions partial.

After playing with some other grid systems, I can see how it might be really useful to use some functions when declaring your project's variables in an _init.scss.

Importing your Sass modules after your variables is a nice pattern given the !default feature of Sass, but you could make an exception for helper functions, importing helper functions then defining variables and then importing modules.

Let's move our functions into a functions partial.

Zengrids.com has expired

BTW Merry Christmas John!

Add feature for margin-based gutters with padding-less grid items

I was working on a demo that compares various layout methods and it required putting background colors on the grid items. Since Zen Grids currently uses padding for gutters, applying background colors directly on the grid item doesn't work since both the gutter and the grid item end up with a bg color.

When I added an extra div to the demo to get the right bg colors, someone complained about needing “more markup” just to get the advantages of Zen Grids. sigh Zen Grids is optimized for the normal “I don't want a bg color around every grid item” designs, but any kind of layout demo will always be the polar opposite of this normal use case.

It would be nice to give designers to use margin-based gutters even if that means they'll have to use %-based gutters. :-p

Remove deprecated zen-columns

zen-columns was my direct port of the layout method to Sass. It worked fine. But its severely limited compared to the zen grids mixins. It is effectively deprecated.

I'm going to remove it.

IE 7 incompatibility

I am developing a responsive site with zen grids. The CSS works perfectly on IE 8 and 9. In IE 7 some zen grids layouts are broken. some grid items overlap even if the are cleared. I also set $legacy-support-for-ie7 to true. I also tried to use compass' clearfix mixin. But on some layouts that just won't work when you "swap" the order of two grid items (display one before the other where in the HTML the order is opposite). Is there a way to fix this issue?

Add $zen-column-widths to allow for non-equal grid columns

Equal column grid systems are the norm. But they are not the only way to create a grid system.

Mark Boulton reminds us that:

The fundamental problem with ALL grid generators and frameworks is they assume you want columns of the same width.

He continues:

What about asymmetry? Ratio grids?

Zen Grids currently uses the $zen-column-count to specify the number of equal-width columns in the grid. As an alternative to that variable, we could add a $zen-column-widths variable that takes in a list of widths. For example:

// We define our unequal-width grids in this way:
// Column 1: 66% × 66% = 45%
// Column 2: 66% × 33% = 22%
// Column 3: 33%

$zen-column-widths: (45%, 22%, 33%);

Then our normal @include zen-grid-item(2, 1); (which specifies that a grid item should span 2 columns and be positioned in the 1st column) would set the grid item’s width at 67% (45 + 22). And @include zen-grid-item(2, 2); would set the item’s width at 55% (22 + 33).

Obviously, you could use ems or pxs instead of %s.

Nested grids - help appreciated

Hey there,

I'm really starting to like Zengrids but have one issue I can't get solved:
How are nested grids supposed to work?

I have a basic layout with 12 columns: 3 col sidebar, 9 col main.
Now I told the main column to be a nested container using zen-nested-container() after zen-grid-item() of the main column. When I now start creating new grid items inside main they seem to be calculated based on a new 12 column grid, based inside main column, this of course results in having smaller column widths, when I actually want to have the same grids inside my nested grid.

Is this supposed to work like this or am I missing a point here?

Background: I'm creating a zen subtheme for Drupal and want to layout my individual fields inside the main column (using display suite or node templates) to be on the grid. Is there another way to tackle this?

Thanks & regards,
Daniel

Update: It seems to work the way I need it if I set the nested grid to have 9 columns using $zen-column-count: 9;
Is this they way it's supposed to be done?

Special Layout Problems

Add composer support

Not sure if this would be useful, but maybe. See https://github.com/RobLoach/component-installer

Warning about empty box-sizing polyfill causes IE6 support to fail

We're checking @if ($legacy-support-for-ie6 or $legacy-support-for-ie7) and $box-sizing == border-box and $box-sizing-polyfill-path == "" to see if we need to warn about an empty path to the box-sizing polyfill.

Unfortunately, if the warning is generated, we're skipping all the IE6 support properties as well. Oops.