Zen theme: understanding the zen grids design in _responsive.scss? Below is some of the code from _responsive.scss from the latest release of the Zen theme. It controls the layout of the page. Does anyone know what I have marked 'FROM HERE' to 'TO HERE' is for? I was following the Zen grids method fine until I came across this section of Sass. It doesn't appear in the five column layout, just the three column layout. Thanks

/**
* The layout when there are two sidebars.
*/
.two-sidebars {
  /* Span 2 columns, starting in 2nd column from left. */
  #content {
    @include zen-grid-item(2, 2);
  }

  /* Span 1 column, starting in 1st column from left. */
  .region-sidebar-first {
    @include zen-grid-item(1, 1);
  }

  /* Start a new row and span all 3 columns. */
  .region-sidebar-second {
    @include zen-grid-item(3, 1);

    --- FROM HERE ---

    @include zen-nested-container(); // Since we're making every block in this region be      a grid item.
    @include zen-clear();

    /* Apply the shared properties of grid items in a single, efficient ruleset. */
    .block {
      @include zen-grid-item-base();
    }
    /* Span 1 column, starting in the 1st column from left. */
    .block:nth-child(3n+1) {
      @include zen-grid-item(1, 1);
      @include zen-clear();
    }
    /* Span 1 column, starting in the 2nd column from left. */
    .block:nth-child(3n+2) {
      @include zen-grid-item(1, 2);
    }
    /* Span 1 column, starting in the 3rd column from left. */
    .block:nth-child(3n) {
      @include zen-grid-item(1, 3);
    }

    --- TO HERE ---

  }


}
*Note that this is also inside the .region-sidebar-second container

Also of note, is that zen-grids actually has nothing to do with Drupal apart from being created by John Albin. The documentation can be found here.

Quick and dirty explanation:

--FROM HERE--

@include zen-nested-container(); // Since we're making every block in this region be      a grid item.


Ensures that the element (in this case, .region-sidebar-second) does not have any guttering (margins outside of the declared columns).

@include zen-clear();


This means that the sidebar region will have a clearfix applied

/* Apply the shared properties of grid items in a single, efficient ruleset. */
.block {
  @include zen-grid-item-base();
}


This applies a set of base styles to all blocks that will be in the sidebar. Things such as gutter width and box sizing. It takes something of an OOCSS approach in that it encourages DRY CSS (i.e. you don't need to apply the same CS to each block individually).

/* Span 1 column, starting in the 1st column from left. */
.block:nth-child(3n+1) {
  @include zen-grid-item(1, 1);
  @include zen-clear();
}


For 1st block in a group of three (3n+1), make the block 1 column wide, and place it in the first "column". Then assign a clearfix. I tend to read @include zen-clear() as new line.

/* Span 1 column, starting in the 2nd column from left. */
.block:nth-child(3n+2) {
  @include zen-grid-item(1, 2);
}


For 2nd block in a group of three (3n+1), make the block 1 column wide, and put it in the second "column"

/* Span 1 column, starting in the 3rd column from left. */
.block:nth-child(3n) {
  @include zen-grid-item(1, 3);
}


For every third block, make it 1 grid item wide, and put it in the 3rd "column"

--- TO HERE ---


Useful links:

Note: As of August 13th 2013 these all work fine, but they might go over the next few years. If they do go and you notice, please be a darling and remove/update them from this answer ;-)


CSS Tricks nth-child tester
Zen grids documentation
Nicole Sullivan's OOCSS code standards (trust me, if you're using SASS then you're going to want to read this).
Harry Robert's fantastic CSS guidelines.
The obligatory link to CSSWizardy that I attach to almost every SASS/CSS question I answer.