Menu
As you can see in the image every box has a different height and there are some boxes with double width.
Is it possible to create a masonry-style layout only with CSS?
266
To use masonry layout, one of your grid axes needs to have the value masonry . This will then be referred to as the masonry axis, the other axis will have rows or column tracks defined as normal, this will be the grid axis. The CSS below creates a four-column grid, with the rows set to masonry .
Masonry layout is a layout method where one axis uses a typical strict grid layout, most often columns, and the other a masonry layout. On the masonry axis, rather than sticking to a strict grid with gaps being left after shorter items, the items in the following row rise up to completely fill the gaps.
A mosaic divides a map layout up into multiple pages in a PDF. It is designed for printing large layouts on a smaller sheet size and combing back together. This tool is similar to poster printing utilities available in other applications.
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.
108
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
