Pinterest-Style Column Layout In Pure CSS


<div id="wrapper">
    <div id="columns">
    
        <figure>
        <img src="demo.jpg" alt>
        <figcaption>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</figcaption>
        </figure> 

        <figure>
        <img src="demo_2.jpg" alt>
        <figcaption>caption goes here...</figcaption>
        </figure> 

        <figure>
        <img src="demo_3.jpg" alt>
        <figcaption>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</figcaption>
        </figure> 
..................
        
    </div>
</div>  

<------------ CSS ------------>  
#wrapper {
        max-width:80%;
        margin: 0 auto;
    }
    #columns {
        column-gap: 15px;
        column-width: 220px;
        -moz-column-gap: 15px;
        -moz-column-width: 220px;
        -webkit-column-gap: 15px;
        -webkit-column-width: 220px;
        background: rgba(0, 0, 0, 0);
        font-family: Arial,sans-serif;
        padding: 15px;
        width: 100%;
    }    

    div#columns figure {
        background: none repeat scroll 0 0 #fefefe;
        border: 2px solid #fcfcfc;
        box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
        display: inline-block;
        margin: 0 2px 15px;
        padding: 15px 15px 10px;
        transition: all 0.4s ease-in-out 0s;
        text-align: center;
    }

    div#columns figure img {
        width: 100%; 
        height: auto;
        border-bottom: 1px solid #ccc;
        padding-bottom: 15px;
        margin-bottom: 5px;
    }
    #columns figure figcaption {
        color: #444;
        font-size: 0.9rem;
        line-height: 1.5;
        margin: 0;
        text-align: left;
    }
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s