1

I'm trying to implement a "masonry" grid ... well, tricks using css column-count to achieve such.

Here's a tutorial I am following: http://w3bits.com/css-masonry/

I'm finding the last item in the first column to "wrap". It gets truncated and some appears at the bottom of the column, while the rest appears at the top of the second panel.

enter image description here

How can I prevent this?

Here's some code:

.masonry {
  column-count: 2;
  column-gap: 0;
}

<div className="masonry">
  <div style={{display: 'inline-block', float: 'left', width: '100%', height: '285px', backgroundColor: 'red', margin: '0 0 1em'}}></div>
  <div style={{display: 'inline-block', float: 'left', width: '100%', height: '196px', backgroundColor: 'green', margin: '0 0 1em'}}></div>
  <div style={{display: 'inline-block', float: 'left', width: '100%', height: '183px', backgroundColor: 'blue', margin: '0 0 1em'}}></div>
  <div style={{display: 'inline-block', float: 'left', width: '100%', height: '234px', backgroundColor: 'orange', margin: '0 0 1em'}}></div>
  <div style={{display: 'inline-block', float: 'left', width: '100%', height: '123px', backgroundColor: 'yellow', margin: '0 0 1em'}}></div>
</div>
Chris Allinson
  • 1,837
  • 2
  • 26
  • 39

0 Answers0