Simple grid system made out of CSS columns

Question

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:

<div class="grids">
    <div class="gridElement">
        <img alt="image" src="assets/images/image.jpg">
    </div>
    <div class="gridElement">
        <img alt="image" src="assets/images/image.jpg">
    </div>
    <div class="gridElement">
        <img alt="image" src="assets/images/image.jpg">
    </div>
    <div class="gridElement">
        <img alt="image" src="assets/images/image.jpg">
    </div>
    <div class="gridElement">
        <img alt="image" src="assets/images/image.jpg">
    </div>
    <div class="gridElement">
        <img alt="image" src="assets/images/image.jpg">
    </div>
</div>

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%;
}

Answer 1

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.

Answer 2

Very impressive! I forgot that this tech existed. Anyways, off to review:

Prefixes and Indentations

column-count will be bound to prefixes for quite a while, since only a few browsers like IE (amazing!) support it. So when it comes to prefixes, the most common formatting style is a cascaded indentation. Makes it more readable.

-webkit-column-count: 3;
   -moz-column-count: 3;
        column-count: 3;

Usable Dimensions

Ok, it's neat that the layout can flex fluidly, but is it still usable past a given dimension? Like say below 480px? It would most likely break the innards of the cells in the column. Same goes for large screens. Do you think 3 column layout still looks good on a 1920x1024 screen? With all the things very spacey and images zoomed out?

I suggest placing a min-width for the .grid. 480px should be the least, since most 4in mobile phones are at least 480px wide when on portrait. As for maximum, it's your call. You can set a hard maximum around 1024px to 1440px or adjust the columns as you go bigger, like say go 4 columns beyond 1440px. You can use media queries for this one.

Tweaks

Here are some more tweaks:

Target the images

.grids .gridElement img{
  min-width : 100%
}

This would set all descendant images to 100% width. This will break a lot of images under a grid element. You can target them specifically so that only they will be affected. You can also isolate them in <div> to further denote that they are not part of the content but in a heading, like pinterest.

<div class="gridElement">
    <div class="post">
      <img alt="image" src="http://www.csctradeshow.com/images/female.png">
    </div>
    <div class="stuff">
      <!-- pin buttons, like buttons, comments etc -->
    </div>
</div>

.grids > .gridElement > .post > img {
  width: 100%;
}

Skip the .gridElement

You can skip .gridElement and use div instead. We all know the only children of .grid is the elements of the grid. Saves you a few characters on the HTML side.

<div class="grid">
    <div>
        <div class="post">
          <img alt="image" src="http://www.csctradeshow.com/images/female.png">
        </div>
    </div>
    ...
</div>

.grids > div > .post > img {
  width: 100%;
}