WordPress / Web Development Tutorials
(Best WordPress Tutorials)

CSSHTMLJavaScriptjQueryMySQLPHPSilvaTechnologiesWooCommerceWordpress
Silva Web Designs - Blog

How To Create A Responsive Pinterest Style Layout With CSS

If you’ve seen the layout on Pinterest you probably already know what we are going to be creating here. If not, it’s essentially the stacking of divs or images of different sizes with a set number of columns (view demo). We really do love this style of layout, it gives a different kind of look to the standard Bootstrap columns. So let’s begin:-

HTML


CSS


#list {
    width: 100%;
    overflow: hidden;
    margin-bottom: -1.875em;
    -webkit-column-count: 3;
    -webkit-column-gap: 1.875em;
    -webkit-column-fill: auto;
    -moz-column-count: 3;
    -moz-column-gap: 1.875em;
    -moz-column-fill: auto;
    column-count: 3;
    column-gap: 1.875em;
    column-fill: auto;
}

.item {
    background-color: #169fe6;
    margin-bottom: 1.875em;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
}

You can see a working demo here.

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

5 thoughts on “How To Create A Responsive Pinterest Style Layout With CSS

Join the discussion

Related Posts

Related - Best Practices To Maximise The Effective Use Of Photos In HTML

HTML / 16th February 2022

Best Practices To Maximise The Effective Use Of Photos In HTML

Read More Related - How to Limit Text Length to X Lines Using CSS

CSS / 15th February 2022

How to Limit Text Length to X Lines Using CSS

Read More