CSS Columns - Pinterest

CSS-Columns---Pinterest.markdown

CSS Columns - Pinterest

More Pinteresty. Works in FF, Chrome, not IE9.

A Pen by KatieK on CodePen.

License.

index.html

<h1>Pinterest-style layout using CSS3 columns (Advanced)</h1>

<div id="wrapper">
    <div id="cols">
        <div class="item">
          <img src="http://placekitten.com/400/700?image=1" />
            <p>0) Craft beer farm-to-table.</p>
        </div>
        <div class="item">
            <img src="http://placekitten.com/400/450?image=2" />
            <p>1) Mollit wolf veniam, leggings art party semiotics Brooklyn High Life sustainable occaecat Banksy actually.</p>
        </div>
        <div class="item">
            <img src="http://placekitten.com/400/600?image=3" />
            <p>2) Letterpress american apparel cliche proident ad quinoa. Twee church-key chillwave, pickled cred photo booth art party aute. Quinoa do street art fashion axe dolore, sapiente 3 wolf moon nesciunt adipisicing skateboard meh laborum.</p>
        </div>
        <div class="item">
            <img src="http://placekitten.com/400/300?image=4" />
            <p>3) Terry Richardson nisi incididunt.</p>
        </div>
        <div class="item">
            <img src="http://placekitten.com/400/900?image=6" />
            <p>3.5) Stumptown deserunt eu raw denim kitsch Etsy ullamco cray ugh proident High Life mlkshk. Bitters banjo nihil.</p>
        </div>
        <div class="item">
            <img src="http://placekitten.com/400/650?image=7" />
            <p>4) Authentic blue bottle thundercats pariatur pickled. Tote bag readymade polaroid, Tonx magna tousled +1 Vice ennui wayfarers delectus ullamco whatever umami Bushwick.  Yr reprehenderit Vice, tattooed anim typewriter 90's irony freegan sapiente actually pariatur.</p>
        </div>
        <div class="item">
            <img src="http://placekitten.com/400/700?image=8" />
            <p>5) Nostrud quis dreamcatcher mollit. Beard cornhole art party, direct trade PBR sartorial labore esse accusamus eiusmod mustache cardigan sustainable officia. Irony bicycle rights kale chips, aliqua pop-up chillwave dreamcatcher Austin cillum raw denim High Life viral. </p>
        </div>
        <div class="item">
            <img src="http://placekitten.com/400/300?image=9" />
            <p>6) Salvia Vice placeat, semiotics 3 wolf moon.</p>
        </div>
        <div class="item">
            <img src="http://placekitten.com/400/500?image=10" />
            <p>7) Accusamus banjo blog DIY viral bicycle rights. Banjo wayfarers 8-bit, ad four loko meh before they sold out scenester literally cray aliquip pork belly McSweeney's ullamco. </p>
        </div>
        <div class="item">
            <img src="http://placekitten.com/400/800?image=11" />
            <p>8) Cliche cred Truffaut nostrud laboris excepteur, church-key single-origin coffee id chambray beard. Gentrify ullamco itemterest, pickled selvage mlkshk Cosby sweater readymade assumenda Neutra.</p>
        </div>
    </div>
</div>

<p>Originally from <a href="http://cssdeck.com/labs/css-only-pinterest-style-columns-layout">http://cssdeck.com/labs/css-only-pinterest-style-columns-layout</a>. Works in FF 22, Chrome 28, and should work in IE10. IE9 requires polyfill.</p>

style.css

h1, h2, ul, p { margin: 1rem; }

#wrapper {
    width: 90%;
    max-width: 1750px;
    min-width: 460px;
    margin: 20px auto;
    padding: 10px;
    outline: solid black 1px;
    background-color: gainsboro;  
}

#cols {
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    column-count: 3;
    column-gap: 10px;
}

.item {
    display: inline-block;
    background: #FEFEFE;
    margin: 0;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    padding: 10px;
    opacity: 1;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease; 
}

.item img {
    width: 100%;
    border-bottom: 1px solid black;
    padding-bottom: 10px;
    margin-bottom: 5px;
}

.item p {
    font-size:small;
    margin: 0;
}

@media (min-width: 1340px) {
    #cols {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }
}

@media (min-width: 1750px) {
    #cols {
        -webkit-column-count: 5;
        -moz-column-count: 5;
        column-count: 5;
    }
}

#cols:hover .item:not(:hover) {
    opacity: 0.4;
}