I've noticed that when I use Masonry within a grid item, when I resize my page (even when reducing all scripts and styles down to just csswizardry-grids and masonry) which would cause my items to reflow, I get a large amount of space on the right and/or bottom of my page, causing scrollbars to appear. This happens in the latest Chrome dev build, latest Safari, iOS 7 Safari, and iOS Chrome. All that I can figure out is that if I set a background color on html along with my page's background image, when it reflows, the extra space is colored the html background color. Otherwise, the body's background is used.

I've also opened an issue at Masonry's github page regarding this.

hey there,

having issues trying to implement the 'silent-classes' version of ur grid.

when i goto compile: i get this error:

Change detected at 17:10:51 to: style.scss
WARNING on line 232 of /Users/tim/Desktop/GIT Repos/msnd-programme-cutup/scss/style.scss: ".scene .grid-content" failed to @extend "%grid".
The selector "%grid" was not found. This will be an error in future releases of Sass. Use "@extend %grid !optional" if the extend should be able to fail. WARNING on line 235 of /Users/tim/Desktop/GIT Repos/msnd-programme-cutup/scss/style.scss: ".scene .left" failed to @extend "%grid__item". The selector "%grid__item" was not found. This will be an error in future releases of Sass. Use "@extend %grid__item !optional" if the extend should be able to fail. WARNING on line 236 of /Users/tim/Desktop/GIT Repos/msnd-programme-cutup/scss/style.scss: ".scene .left" failed to @extend "%desk--one-third".
The selector "%desk--one-third" was not found. This will be an error in future releases of Sass. Use "@extend %desk--one-third !optional" if the extend should be able to fail. identical style.css

upon investigation i noticed - that no where in ur csswizardry-grids.scss file - do you define the SASS placeholders that you say you need to apply to DOM elements ie "@extend %grid". Am i missing something here?

Hello,

I would like to use your solution in a CMS but it is very difficult because there is the empty comments to insert each time. Content elements are automatically generated most of the time...

Is there another solution ?

Thx

When using 1/4 widths, each element in the grid wraps unless I add HTML comments between each of the grid elements. Any idea why?

Without HTML comments (doesn't work): http://jsfiddle.net/CN8ba/

With HTML comments (works): http://jsfiddle.net/8X5dZ/

Ideally, I'd like to avoid littering my HTML with comments to make the grid system work, if I can avoid it :-)

<link rel="stylesheet" href="demo.css">

points to http://csswizardry.com/demo.css instead of http://csswizardry.com/csswizardry-grids/demo.css

First off - great library. I'm using it as an introduction to Sass/Compass and the more I learn the more mindblowing the possibilities.

Thanks for introducing push/pull, but when using silent classes, the *= selector doesn't apply position relative to the appropriate elements :(

https://github.com/csswizardry/csswizardry-grids#centred-grids-grid--center

This is not working and I can't find it in any of the .scss files of the inuit.css folder. I'm I missing something?

Hi

Been trying to figure out if its possible to use both regular classes and silent classes.
This is due to the reason that I think that @extend .classname becomes rather bloated in comparision to just extending silent classes.

The only two ways I figured out is:

1. rewriting the scss fil it-self, but this causes problems with updating the core scss.
2. including the csswizardry-grid twice. Once with the param set to use silent classes and once setting param to use regular classes.

Both ways seems error prone to me :(

Hey there!
I really love working with this grid, simplest one I came across so far. Just a quick thought:
When using the mark-up-fix, the em-value seems to be a magic number and sometimes not the best solution. Wouldn't a variable with a default on 0.31em then be clearer to people running into bugs?
For example, when working with Georgia 20/1.5, the whole thing would only work with -0.32em when going down to the mobile breakpoint. ( I think it must be some rounding mistake browser-side). The browser was chrome 26, I can send some screenshots if needed. While this may be a really specific case, it shows that this number is not bulletproof.

Hey Harry,

Thanks for being so responsive (heh) to all the issues. I have a question about line 167 in the file "Enclose a block of code with a media query as named in $breakpoints."

Not sure how to take that: are you saying this is a way to implement our own media queries in our styles?

I've been using this mixin from css-tricks, even if it does end up duplicating things in the compiled code:

@mixin breakpoint($point) {
    @if $point == mobile-only {
        @media only screen and (max-width:480px) { @content; }
    }
    @else if $point == tablet-only {
        @media only screen and (min-width:481px) and (max-width:1023px) { @content; }
    }
    @else if $point == mobile-and-tablet {
        @media only screen and (max-width:1023px)  { @content; }
    }
    @else if $point == tablet-and-up {
        @media only screen and (min-width:481px) { @content; }
    }
    @else if $point == desk-only {
        @media only screen and (min-width:1024px) { @content; }
    }
}

Maybe I am missing something, but there doesn't seem to be an option to reset push and pull modifiers' positioning to 0% for breakpoints.

For example, if using push--one-third, there isn't a way to set left positioning to 0% for push--palm-- modifier.

A line like this one added to the pull setup would solve the issue:

#{$class-type}pull--#{$namespace}none { right:0%; @include silent-relative(); }

Similar for the push setup:

#{$class-type}push--#{$namespace}none { left:0%; @include silent-relative(); }

..which would generate classes like push--palm--none, pull--lap--none etc.

Hi there,

Just tried to use the modifier: @extend .grid--wide; and getting this back from my compiler:

WARNING on line 669 of /Users/timpaul/Desktop/GIT Repos/msnd-programme-cutup/scss/style.scss: ".scene#stage .grid-in-grid" failed to @extend ".grid--wide".
The selector ".grid--wide" was not found. This will be an error in future releases of Sass. Use "@extend .grid--wide !optional" if the extend should be able to fail.

After quick scan of your scss, I can't find any code where you setup these modifiers... am i missing something?

I've hacked in my own modifier for now - but something u might want to look at?

#{$class-type}grid--wide{
    @extend #{$class-type}grid;
    $gutter-wide: $gutter * 1.5;
    margin-left:-$gutter-wide;

    > #{$class-type}grid__item{
        padding-left:$gutter-wide;
    }
}

I remember in one of the previous version of inuit to be able to use lap-hide, palm-hide etc, is there a similar helper in cwg?

IMO - seems that "fourths" would be a more natural fit, given its usage in a system of fractions:

thirds
fourths
fifths
sixths

Quarters seems out of place to me, but its likely an American/British difference?

Anyways, just curious about it. Keep up the stellar work.

Just curious why this isn't included in the main inuit repo? It seems like it contains a lot of utilities that are mentioned in some of your docs but aren't included in the main repo.

Supposing it has been tested already on different browsers could you append results to the README file?
I'm sorry if the question appear pedantic but it's alway the first thing I look for ; )

First of all say that i don't know if this is the proper usage of grid and grid__items, but i did it in that way because you can avoid unnecessary html tags. To illustrate the problem i make a fiddle with the markup http://jsfiddle.net/Pitxon/qzn9t/.

The first div inside body is aligned center as normal but the children of the div that is both a grid__item and a grid doesn't align center, the parent of that two divs is getting the text-align: left property from his parent, the body element throught the > selector although it has the class grid--center, so i feel that the div should take the property value text-align: center instead of left.

As a quick fix i added !important to the following part of the library:

#{$class-type}grid--center{

text-align:center !important;

   > #{$class-type}grid__item{
    text-align:left;
}
}

The thing is if this is a proper way of do this kind of thing or maybe i should go with an
extra div as grid grid--center?

thx for this awesome grid system!!!!!

Hi,

just to get one thing right: Your grid-items are only for layout purpose? Because if I add a bg-color the guttes become "invisible" due to the fact you use padding. So I need some kind of content element with a styling class - right?

Kind regards,

Strange. Looks like a grid needs to contain at least two .grid__item to make .grid--middle work.

It would be nice to have support for equal height grid items for cases where there is a need to set a vertical border or background on children of .grid__item blocks.

One of the solutions would be to use overflow hidden on grid--equal-height and a large padding and negative bottom margin on .grid__item children (see http://mattkirman.com/2009/10/12/equal-height-columns-with-pure-css/), but:

• it's a hack which requires more markup if you need a vertical border (nesting another element into .grid__item - for example, .grid__item__inner to apply negative margin, positive padding and a vertical border to; the reason is because applying those on .grid__item does not work with a border);
• it would work for cases when all equal height columns are in one row horizontally; it might not work nicely or as expected though when $responsive is set to true and you try to apply responsive classes like palm-one-third.

Any thoughts on a better implementation?

First of good job.
If I integrates this grid in a project or other framework, there is a need to define variables in a separate file (_vars.scss). It would be great if each variable had a !default flag so I can overwrite with my own values.

@import 'variables'; // own defined variables
@import 'grid'; // default variables

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#variable_defaults_

Hi, I included the .scss file in my project and I got the following error:

DEPRECATION WARNING on line 153 of sass/initialize/partials/_csswizardry-grids.scss:
Assigning to global variable "$class-type" 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 "$class-type: unquote("%") !global" instead.

NoMethodError: undefined method `zero?' for nil:NilClass
Use --trace for backtrace.

It looks like that the .css file was generated without errors though.

I'm running Sass 3.3.0.rc.2 (Maptastic Maple).

I added this to the grid, to hide things on devices, like palm--hidden .

I think, this is a nice feature, so perhaps you can implement as well.

/------------------------------------
$WIDTHS
------------------------------------/
/

• Create our width classes, prefixed by the specified namespace.
  */
  @mixin device-type($namespace:""){

  {$class-type}#{$namespace}hidden {display:none;}

Best regards,
Tobias

Please include a license file.

Hey, maintainer(s) of csswizardry/csswizardry-grids!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library csswizardry/csswizardry-grids is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "csswizardry/csswizardry-grids",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Of course I minimise my CSS in production using either grunt or Compass condensed output, but I like to see the generated CSS during development and this module fills it with comments. /* C-style comments */ in Sass are passed through to the CSS but // single-line comments are not.

iPad's default landscape width is 1024. This means that it doesn't get the lap style because it's defined as:

'lap' '(min-width: 481px) and (max-width: 1023px)'

This seemed very odd to me. The max-width should be set to 1024px so that iPad (and Galaxy Tab, etc) gets lap/portable styles.

Would there be any milage in setting the grid__item width to 100% by default.

My thinking is that nine times in ten, at mobile sizes you're going to want a single column so it would remove the need declare one-whole repeatedly.

This way you just add classes for your breakpoints as you size upwards and if you wanted to have more than one column at mobile you can simply add an un-prefixed or 'palm-' class to those elements before your 'lap-' or 'desk-' classes.

It just cleans the mark-up slightly for those who would rather use classes than extends. I've probably defeated a point somewhere though so just slap me.

Any Thoughts? Cheers!

Would it be possible (given Sass syntax, and the math involved) to write our breakpoints in ems instead of pixels? em-based media queries are more flexible and considerate of the content than pixel values.

Articles:

• @viljamis
• Cloud 4
• filament group
• @_joshnh

In Chrome 32.0.1700.102, I have noticed that the letter-spacing value of -0.31em has some problems. It makes the grid__item appear 1px smaller in width than you define.

It seems assigning the value of -0.25em, instead of -0.31em, fixes the problem.

I have set up a pen here: http://cdpn.io/EzqDe

I've encountered an issue recently with this grid system in Canary (28.0.1499.0). The first thing I did is check against the original demo — sure enough, the demo is acting up too: http://csswizardry.com/csswizardry-grids/. Resize slowly and you'll start to see elements that should mathematically fit snap to the next line. Attached is an example of it at 1192px, you can see Grid 2.5 snapping when it should be inline with 2.3 & 4. I've replicated this with twelfths and fifths as well.

I can't replicate this in current (stable) versions of Firefox, Chrome, or Safari.

I'm trying to set position: fixed to a .grid__item.two-sixths, however the column will go to the bottom of the page, and the other one (four-sixths) will float to the left.

I also tried to set the position to the element inside the column (a ul), however that doesn't work, either. The ul loses the width of the parent.

Am I missing something, or is this impossible?

I have a grid based in the footer of a site using quarters.

White space has been removed but for some reason the first item sits above the last 3. I am not sure what I am doing wrong but here is the markup (I might be missing something blindingly obvious)

http://cl.ly/image/1V0n0v1i2R3w

Allow grids with no gutters, the following should work:

.grid--full{
    @extend .grid;
    margin-left:0;
}

    .grid--full > .grid__item{
        padding-left:0;
    }

I'm just wondering mainly out of curiosity why you've gone with display: inline-block over float like you've used for your Inuit grid which is almost identical (maybe you're planning on changing Inuit to be the same)? And I'm also curious about the fix for removing the dreaded white space created between inline block elements, how did you come up with that? Good work!

Thanks for your work on this.

I am trying to get a simple grid working with one grid div and three grid__item divs set at class = one-third.

When I do this, the last div moves down to the next row.

I have also tried with one-half and two divs and I get the same issue.

Am I missing something small?

If I nest a grid I always get double the margin-left or padding-left.

I really like this system due to the BEM approach but it's not been updated in 6 months and has some issues outstanding, not least compatibility with ems.

Are there plans to further develop it? Would be a shame to let it die as it's unique as far as grids are concerned, imo.

for the next release i would suggest a renaming of some classes.

lap--one-quarter --> lap--1-4
desk--three-twelths ---> desk--3-12

to write the whole names all the time can be really annoying since i am only importing the scss in bower and cant use mixins -- or is this possible to use mixins if i only import the scss?

thanks.

Sorry if this has been covered, I searched the issues and documentation and couldn't find anything...

I've noticed content in the last column that overflows (such as a long word) causes a horizontal scrollbar.

Do you recommend adding an overflow declaration or would you advise using a different strategy?

Thank you!

If you use silent classes, SASS outputs strange CSS (http://codepen.io/anon/pen/CuFsE)

I created three divs (.test1, .test2, .test3) and applied some silent classes to them:

<div class="test1">
    <div class="test1__item"></div>
</div>
<div class="test2">
    <div class="test2__item"></div>
</div>
<div class="test3">
    <div class="test3__item"></div>
</div>

The CSS output looks like this:

.test2 > .test1__item, .test2 > .test2__item, .test2 > .test3__item { }

If you have a look at the Code (Codepen) you might notice ".test2 > .test1__item" and ".test2 > .test3__item" don't exist (and won't exist in future). I know why this happens (SASS doesn't know my HTML structure), but i'm wondering if there is a "fix" or at least a workaround? The only workaround i can think of is using silent classes only for widths, pull and push classes and use a HTML structure like this instead

<div class="grid test1">
    <div class="grid__item test1__item"></div>
</div>
<div class="grid grid--bottom test2">
    <div class="grid__item test2__item"></div>
</div>
<div class="grid--middle test3">
    <div class="grid__item test3__item"></div>
</div>

This could work, but probably this is a known issue and somebody came up with a better workaround.

Thanks in advance

First off, let me say "great job" for your work on this. Really excellent stuff.

Having worked with developers in the past they often complained to me that my string-based CSS grid selectors were difficult to work with when generating grids dynamically using a server-side language.

Would it be worth considering aliasing the string-based selectors (eg: .one-half) for unit based versions (eg: .1-2) ? Would be easier to generate in a PHP for loop for example.

Would be very interested to hear your thoughts.

I was trying to define custom values for the $breakpoints variable but I wasn't able. Just found out there is no !default at the end of those variables. Any specific reason for that?

$breakpoints: (
'palm' '(max-width: 480px)',
'lap' '(min-width: 481px) and (max-width: 1023px)',
'portable' '(max-width: 1023px)',
'desk' '(min-width: 1024px)'
)!default;

$breakpoint-has-widths: ('palm', 'lap', 'portable', 'desk')!default;
$breakpoint-has-push: ('palm', 'lap', 'portable', 'desk')!default;
$breakpoint-has-pull: ('palm', 'lap', 'portable', 'desk')!default;

The code for showing how to use the grids with a CMS doesn't show an example but instead just shows a Hello World.

Is there/should there be a setting to have full-width grid items, either full-width by setting mobile-first to true, or full-width by applying the .one-whole class be gutterless? In most cases I have a padding set on whatever container the grid is sitting in for mobile/full-width layouts, and I imagine most other people do as well, so the gutter is not needed.

I tried to work with the silent classes but i can't get it right.
I set $mobile-first to false and silent-classes true:
My css is:

.container {
    @extend %grid;
    background-color: #aaa;
}
.half {
    @extend %grid-item;
    @extend %one-half;
}

HTML like this:

<div class="container">
    <div class="half">
        <div class="demo">Test</div>
    </div>
    <div class="half">
        <div class="demo">Test</div>
    </div>
</div>

The Two divs with the class "half" are below each other and not in one row.

When the order of grid items is reversed, the desired behaviour is not
necessarily to align the entire grid to the right. It can be seen when
grid items widths don't add up to 1 (for example, they add up to three
quarters) like so:

<div class="grid--rev">
  <div class="grid__item  one-quarter">
        <p class="demo-block">Grid 1.1</p>
    </div>
  <div class="grid__item one-quarter">
        <p class="demo-block">Grid 1.2</p>
    </div>
</div>

Was it for a particular reason that text-align:right was added to grid--rev (cross browser bug etc.)?

If not, better to separate concepts of order and alignment:

• remove text-align:right from grid--rev and added
  text-align:left;
• add grid--right modifier to manage right alignment of grid;

Fixed here: https://github.com/oksana-khristenko/csswizardry-grids/tree/feature/order-alignment

I really like the idea of using inline-block instead of floats but while developing it's a pain to use HTML comments ect. and the letter/word-spacing hack is pretty awful as well.

I've developed a small script that can help during development - https://github.com/dotnetCarpenter/white-space

I'm using csswizardry-grids together with the script and so far it's been great. If you like the idea, it might be worth noticing in the README - Note the empty HTML comments.

Personally, I would recommend minifying and gzipping the HTML content in production, to leverage the problem, but your mileage could vary.

Having responsive grid classes like lap-grid--center, palm-grid--rev etc. may be useful to add more flexibility to grids at different breakpoints.

Have a look at https://github.com/oksana-khristenko/csswizardry-grids/tree/responsive-grid-classes - what do you think?

Let me first say that i am in love with your framework :D, leaving that apart, would you mind in the future add pull and push classes in this grid like those in yout framework?, They are realy helpful when you are trying to achieve cool multi-nested combinations.