CodePen

HTML

            
              <div class="box-container">
  <div class="box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor velit, sagittis ut placerat eget, commodo et dui. Morbi feugiat.
  </div><div class="box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor velit, sagittis ut placerat eget, commodo et dui. Morbi feugiat.    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor velit, sagittis ut placerat eget, commodo et dui. Morbi feugiat.
  </div><div class="box">
    Lorem ipsum dolor sit amet, consectetur yep yep yep dogs cats living together. adipiscing elit. Sed tortor velit, sagittis ut placerat eget, commodo et dui. Morbi feugiat.
  </div>  <div class="box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor velit, sagittis ut placerat eget, commodo et dui. Morbi feugiat.
  </div><div class="box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor velit, sagittis ut placerat eget, commodo et dui. Morbi feugiat.
  </div><div class="box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor velit, sagittis ut placerat eget, commodo et dui. Morbi feugiat.
  </div>
  
</div>


            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              *, *:after, *:before { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.box-container {
  background-color: red;
  padding: 1em;
  width: 50%;
  -webkit-column-count: 3;
  -webkit-column-gap: 1em;
  -moz-column-count: 3;
  -moz-column-gap: 1em;
}

.box {
  display: inline-block;
  background-color: white;
  margin: 0 0 1em 0;
  padding: 1em;
  vertical-align:top;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................