如何仅使用CSS显示水平的砌体布局？

Question

我有一个简单的块，其中要显示水平砌体布局的元素

这是我的解决方法

jsfiddle：enter link description here

这里是html

 <div class="template-block">
        <div class="template-block_item">
            <h2>1</h2>
            <img src="https://devplaysvideo.s3.amazonaws.com/user_files/2/rendered/dev267259827504d9f001f584dd1493cbf289471614_poster.jpg">
        </div>
        <div class="template-block_item">
                <h2>2</h2>
            <img
                src="https://playsvideo.s3.amazonaws.com/user_files/2/rendered/04e3c3be8bb54fdeaeb8b6675f79b1d873bfef62_poster.jpg">
        </div>
        <div class="template-block_item">
                <h2>3</h2>
            <img
                src="http://www.10wallpaper.com/wallpaper/medium/1109/Dolls-Cartoon_character_-_HD_Desktop_Wallpaper_second_Series_medium.jpg">
        </div>
        <div class="template-block_item">
                <h2>4</h2>
            <img src="http://www.plusthings.com/wp-content/uploads/2013/07/Disney-Cartoon-8.jpg">
        </div>
        <div class="template-block_item">
                <h2>5</h2>
            <img
                src="http://images6.fanpop.com/image/photos/34900000/Minion-Hitman-despicable-me-minions-34992255-2592-1620.jpg">
        </div>
        <div class="template-block_item">
                <h2>6</h2>
            <img src="https://playsvideo.s3.amazonaws.com/user_files/2/rendered/a8a1707d7756938699f37ba0a8fad2810a008e75_poster.jpg">
        </div>
        <div class="template-block_item">
                <h2>7</h2>
            <img src="http://pre12.deviantart.net/1d7f/th/pre/f/2013/195/b/f/chihiro_hakuresized_by_chukairi_d6d8vl4_by_chukairi-d6dg8fe.jpg">
        </div>
        <div class="template-block_item">
                <h2>8</h2>
            <img src="https://playsvideo.s3.amazonaws.com/user_files/2/rendered/a8a1707d7756938699f37ba0a8fad2810a008e75_poster.jpg">
        </div>
        <div class="template-block_item">
                <h2>9</h2>
            <img src="https://playsvideo.s3.amazonaws.com/user_files/2/rendered/a8a1707d7756938699f37ba0a8fad2810a008e75_poster.jpg">
        </div>
        <div class="template-block_item">
    </div>


  [1]: https://jsfiddle.net/sgdk4hou/

这里是CSS

.template-block { /* template-block container */
    column-count: 4;
    column-gap: 1em;
}

.template-block_item { /* template-block bricks or child elements */
    background-color: #eee;
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}
body {
    font: 1em/1.67 'Open Sans', Arial, Sans-serif;
    margin: 0;
    background: #e9e9e9;
}

.wrapper {
    width: 95%;
    margin: 3em auto;
}

.template-block {
    margin: 1.5em 0;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
    font-size: .85em;
}

.template-block_item {
    display: inline-block;
    background: #fff;
    padding: 1em;
    margin: 0 0 1.5em;
    width: 100%;
    -webkit-transition:1s ease all;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: 2px 2px 4px 0 #ccc;
}
.template-block_item img{max-width:100%;}

@media only screen and (min-width: 400px) {
    .template-block {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}

@media only screen and (min-width: 700px) {
    .template-block {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width: 900px) {
    .template-block {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 1100px) {
    .template-block {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

@media only screen and (min-width: 1280px) {
    .wrapper {
        width: 1260px;
    }
}

现在它垂直显示，我希望它水平显示

[当元素只有四个时，假设元素可以超过30个，则类似这样

我需要更改以获得我想要的东西吗？