Simple grid system made out of CSS columns

I have been researching and experimenting with HTML5 and CSS3. I was aiming to create a very simple but efficient tiled gallery / grids. So some sort of grid system that I can layout anything inside.

Below is what I have created, what are your opinions? I also have a question, why the distributing of the images change from browser to another? Is there a way to control it?

Here is a working Fiddle.

HTML:

    
        
    
    
        
    
    
        
    
    
        
    
    
        
    
    
        
    

CSS:
/*Grids System*/
 .grids {
    width: 100%;
    overflow: hidden;
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
}
.grids.twoGrids {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}
.grids.fourGrids {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
}
.grids .gridElement {
    margin-bottom: 10px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
}
.grids .gridElement:last-child {
    margin-bottom: 0;
}
.grids .gridElement img {
    min-width: 100%;
}

There are a few good reasons why no one uses the multi-column module for "grids".

They are rigid

There are only 2 options for the column-span property: none or all. Want to have elements spanning 2 columns? Too bad. Also, last time I checked, Mozilla does not support the column-span property.

They are unpredictable

Each browser has its own algorithm for determining how to generate the columns. If you read the specification, column-count is not a guarantee that you will get the specified number of columns:


describes the optimal number of columns into which the content of the element will be flowed. Values must be greater than 0. If both ‘column-width’ and ‘column-count’ have non-auto values, the integer value describes the maximum number of columns.

From: http://www.w3.org/TR/css3-multicol/#column-count

The emphasis is mine: in an ideal situation, you'll get the exact number of columns you've specified. If the browser's algorithm decides that there's not enough room for that many, it will give you less.

Controlling where breaking occurs is a nuisance

Since you're using images for testing, you're not seeing the problem. Using columns on a parent container doesn't just control how the children flow, but all descendant elements. What this means is that your gridElement will frequently span multiple columns in an effort to equalize the height of the columns. You can specify where breakage occurs (or shouldn't occur) on the descendant elements like so:

.foo {
  -webkit-column-break-inside: avoid; /* Deprecated property name for Webkit (Blink too?) */
  page-break-inside: avoid; /* Non-standard property name for Mozilla */
  break-inside: avoid;
}

http://codepen.io/cimmanon/pen/CcGlE

TL;DR

This system is designed with text in mind, not grids. I predict that if you were to pursue this further, you'll end up being dissatisfied due to the limitations of the module as it is currently specified. If you're just planning to use this with images, my last point above does not apply.

StackExchange Code Review Q#47222, answer score: 3