Views matrix layout

This a views row style plugin that adds extra divs to the output.
When setting the row style plugin, you get to set the number of columns you want to use and the name of the classes.

When theming a matrix one have to face a common problem: how do I handle divs with various sizes?

You want to put "boxes" of content beside each other and limit the number of boxes on each row for different screen sizes. The easiest way to do this is to float all boxes left. If a box doesn't fit, it will create a new row. This can be done with a minimum of CSS code. But. If the boxes have different heights this might create "holes" in the layout as a box is "trapped" by a high box on the above row.
This problem can be fixed in one of two ways (part from using a sturdy table):

1. Set the height of all boxes to the largest box using Java Script. Or improvise a height what will work in most cases. Pros: Simple CSS. Cons: this will create a layout with a lot of spaces.
2. Add CSS code using n-thChild() To add linebreaks. Pros: Somewhat simple CSS. Cons: Only for CSS3 enabled browsers, you will still end up with "holes" in the layout

This module adds extra divs for simple theming. Setting the exact amount of boxes on each row.

Example output:

<div class="view-content">
  <div class="row 3-col-pos-1 2-col-pos-1 first odd">...</div>
  <div class="row 3-col-pos-2 2-col-pos-2 even">...</div>
  <div class="clear-col-2"></div>
  <div class="row 3-col-pos-3 2-col-pos-1 odd">...</div>
  <div class="clear-col-3"></div>
  <div class="row 3-col-pos-1 2-col-pos-2 even">...</div>
  <div class="clear-col-2"></div>
  <div class="row 3-col-pos-2 2-col-pos-1 odd">...</div>
  <div class="row 3-col-pos-3 2-col-pos-2 last even">...</div>
  <div class="clear-col-2"></div>
</div>

Example CSS:
Display three divs per visible row for larger displays.

@media only screen and (min-width: 1024px) { 
  .clear-col-2 {
    display: none; 
  }
  .clear-col-3 {
    clear: both; 
  }
}

Display two divs per visible row for smaller displays.

@media only screen and (max-width: 1024px) { 
  .clear-col-3 {
    display: none; 
  }
  .clear-col-2 {
    clear: both; 
  }
}

Some code in this module was borrowed from semanticviews.