Pinterest has inspired many to do a masonry-based layout on their sites. We have some solid JavaScript alternatives out there to create masonry layouts, but how about using only CSS to do that?
Back in 2011, when Pinterest was just launched, I myself tried creating its lookalike with plain CSS. I started off by using float and vertical-align properties on my inline-block elements (it sounds silly now). It didn’t help.
Some friends suggested me to use tables. Not tables, but the table display properties. With table , table-cell , I ended up with a fixed-height columns grid, which is definitely not a masonry.
The secret CSS recipe for masonry layout
Not a secret actually, some people have already written about it. Before going further, I would like to show you with a demo of what we are going to create:
I discovered this technique while experimenting with CSS column properties. About 3 years ago, I contributed the outcome of this experimentation to a WordPress plugin called WP Pinterest to show Pinterest pins in a masonry fashion. Now when I’ve started this blog to share my CSS love, I’m sharing the technique with you through this tutorial.
No special hacks required, all we need are the CSS column properties to create CSS-only masonry layouts. Lets talk about them.
column-count is the magic property that we’ll utilize to lay down our masonry. We’ll also use another CSS column property column-gap to separate the bricks (masonry items) in our layout. So without waiting anymore, lets jump onto the tut.
column-count allows you to add a number of adjacent columns to anynon-inline element. The child elements inside it aligns as per the number of columns in a masonry fashion. More on column-count.
We can add gaps or margin among child elements with the help of column-gap property. So below are the basic snippets I prepared to demonstrate the masonry:
HTML
Starting up with the markup, I have a container div that wraps our masonry and contains all of our masonry bricks (or columns). I’ve given the container element a class . masonry , and . item to all the child elements.
Note that the below markup carries sample data for demonstration purpose. I’ve used more sample data in the demo to effectively demonstrate the masonry.
|
1 2 3 4 5 6 7 8 9 |
<div class="masonry"> <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> <div class="item">Neque, vitae, fugiat, libero corrupti officiis sint facilis tempora quidem repudiandae praesentium odit similique adipisci aut.</div> <div class="item">Incidunt sit unde minima in nostrum?</div> <div class="item">Ducimus, voluptates, modi, delectus animi maiores consequuntur repellat quisquam fugiat eum possimus enim culpa totam praesentium magni quae!</div> <div class="item">Lorem ipsum dolor sit amet, dicta dolore adipisci hic ipsam velit deleniti possimus cumque accusantium rerum quibusdam.</div> <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, praesentium consequatur ducimus commodi quam ex illo omnis dicta reiciendis vel nesciunt deserunt aut sequi nam mollitia perferendis ipsam possimus temporibus!</div> <div class="item">Ab, adipisci, temporibus eaque quis harum perferendis incidunt cupiditate doloribus dolor numquam voluptates ipsum dolore aspernatur et voluptate ipsam beatae animi culpa.</div> </div> |
CSS
Now comes the most important part, the CSS. Applying CSS column-count property to the container ( . masonry ), the children ( . item s) will be automatically arranged as per the value supplied to the property.
To make child elements properly arranged inside the masonry, its important to set their display as inline - block with 100% width.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.masonry { /* Masonry container */ -moz-column-count: 4; -webkit-column-count: 4; column-count: 4; -moz-column-gap: 1em; -webkit-column-gap: 1em; column-gap: 1em; } .item { /* Masonry bricks or child elements */ background-color: #eee; display: inline-block; margin: 0 0 1em; width: 100%; } |
That’s the basic idea. Demo the masonry here
Fallback?
As CSS columns are supported by modern browsers only, you may also consider adding JavaScript fallbacks to make it work on older browsers. We can add a fallback to our masonry by making use of jQuery Masonryplugin.
Following is the workaround to call jQuery Masonry as a fallback to our CSS masonry in IE9 or below:
|
1 2 3 |
<!--[if lte IE 9]> <script src="masonry.pkgd.min.js"></script> <![endif]--> |
This basic masonry is responsive by default (it won’t create scroll-bars on zooming-in) as none of its elements has any fixed width. Bus still, we can make it look different on different resolutions.
Responsive CSS masonry
Along with the responsiveness, I tried to make it look better than our basic demo. I’m using CSS3 media queries to show different number of columns on different screen resolutions. Sharing the CSS snippet below that I used to revamp our masonry:
Styling
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
body { font: 1em/1.67 'Open Sans', Arial, Sans-serif; margin: 0; background: #e9e9e9; } .wrapper { width: 95%; margin: 3em auto; } .masonry { margin: 1.5em 0; padding: 0; -moz-column-gap: 1.5em; -webkit-column-gap: 1.5em; column-gap: 1.5em; font-size: .85em; } .item { display: inline-block; background: #fff; padding: 1em; margin: 0 0 1.5em; width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-shadow: 2px 2px 4px 0 #ccc; } @media only screen and (min-width: 400px) { .masonry { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; } } @media only screen and (min-width: 700px) { .masonry { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; } } @media only screen and (min-width: 900px) { .masonry { -moz-column-count: 4; -webkit-column-count: 4; column-count: 4; } } @media only screen and (min-width: 1100px) { .masonry { -moz-column-count: 5; -webkit-column-count: 5; column-count: 5; } } @media only screen and (min-width: 1280px) { .wrapper { width: 1260px; } } |
Markup would be similar to the basic example we see earlier in the article. I’ve used a container ( . wrapper ) to wrap-in my masonry, added images and video to make it look attractive. You can see the full markup in the demo source.
That’s it. Further, you may play with the styles to give it the desired look. Hope you enjoyed the tutorial, I welcome your thoughts, questions, and suggestions.
Fonte: http://w3bits.com/css-masonry/