12

As you can see in the image every box has a different height and there are some boxes with double width.

Layout

Is it possible to create a masonry-style layout only with CSS?

bjmc
  • 2,970
  • 2
  • 32
  • 46
Bernat
  • 1,537
  • 3
  • 18
  • 40
  • 1
    hey buddy I remember this site I don't know if you would like to check it I really don't remember if it worked with js or pure css but for sure is not using masonry http://www.leica-oskar-barnack-award.com/ hope it helps – Paradise Aug 24 '12 at 23:15
  • 3
    Where is your code you tried? Where is your online sandbox or jsfiddle? If you would have searched on SO, you would have found out that it is not possible to replicate Masonry with CSS and have it work cross-browser and cross-device. – Systembolaget Aug 25 '12 at 12:37
  • 2
    Take it easy, and breath slowly... ;) – Bernat Aug 26 '12 at 17:34
  • Possible duplicate of [Masonry layout with css grid](https://stackoverflow.com/questions/43917346/masonry-layout-with-css-grid) – TylerH Aug 25 '17 at 19:41
  • You can refer to this: http://sickdesigner.com/index.php/2011/html-css/masonry-css-getting-awesome-with-css3/ If some browsers does not support css3, you need to use the jquery-masonry script. More reference: http://designshack.net/articles/css/masonry/ – user1512616 Aug 24 '12 at 22:12

2 Answers2

19

With css3 support you could do this:

http://jsfiddle.net/huAxS/2/

.container {
    -moz-column-count: 2;
    -moz-column-gap: 10px;
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;
    column-count: 2;
    column-gap: 10px;
    width: 360px;
}

.container div {
    display: inline-block;
    width: 100%;
    background-color: red;
}​

With no css3 support, you have to resort to js unfortunately.

Esailija
  • 138,174
  • 23
  • 272
  • 326
  • As I said, there are some boxes with double width! (2 columns, in this case). And yes, i can use CSS3! – Bernat Aug 24 '12 at 22:11
  • 1
    I've explored it for a long time, it's just not possible with CSS alone. – alt Aug 24 '12 at 22:12
  • 25
    The problem with this solution is that the items are laid out top-to-bottom, left-to-right, whereas what one usually expects (cultural assumptions excused) is left-to-right, top-to-bottom layout. This is the showstopper for the usual CSS3-columns-based recommendations. –  Aug 27 '13 at 10:03
1

I'm working on a site right now with the same kind of layout, two columns with the occasional double-wide box. What I do is just separate the double-wide from the rest of the content. For example:

<div class="two-columns">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="double-wide">
</div>
<div class="two-columns">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

Then you can apply the CSS3 column solution to just the two-columns class. If you need to support IE9 you'll sadly need to add a JavaScript fallback.

DavGarcia
  • 18,540
  • 14
  • 58
  • 96