CSS/jQueryの改善されたページフロー

Question

私は自分のウェブページのフローを改善したいが、私が探しているものが何であるか分からない！

私は、次のHTML考えてみましょう：

<section> 
    <article> 
    <h1>Article Header</h1> 
    <p>Article content</p> 
    </article> 
    <article> 
    <h1>Article Header</h1> 
    <p>Article content</p> 
    <p>More content</p> 
    </article> 
    <article> 
    <h1>Article Header</h1> 
    <p>Article content</p> 
    <p>More content</p> 
    <p>More content</p> 
    </article> 
    <article> 
    <h1>Article Header</h1> 
    <p>Article content</p> 
    <p>More content</p> 
    <p>More content</p> 
    <p>More content</p> 
    </article> 
    <article> 
    <h1>Article Header</h1> 
    <p>Article content</p> 
    <p>More content</p> 
    <p>More content</p> 
    </article> 
    <article> 
    <h1>Article Header</h1> 
    <p>Article content</p> 
    <p>More content</p> 
    </article> 

と記事はセクションに並んで表示されますが、ギャップがあるになり、次のCSS

section article { 
    width: 49%; 
    display: inline-block; 
} 

を記事は異なるサイズである。

ギャップがないように（つまり空き領域を埋めるように）どうすればいいですか？

必要に応じてjQuery/JavaScriptを使用してソリューションに公開しています。

フィドルが追加さ：

http://jsfiddle.net/Yn4et/

Answer 1

私は私はあなたが欲しいものを正しく理解していないが、私は、これは、次の質問の重複していると思う：

How to Create Grid/Tile View with CSS?

Answer 2

section { 
    width: 100%; 
} 

article { 
    width: 50%; 
    display: inline-block; 
    margin: 0; 
    padding:0; 
}