Simple Grid Layout

html.html

<div class="list">
  <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis vero architecto et at atque deserunt consectetur provident.</div>
  <div class="item">Doloremque eveniet, repudiandae magni consequatur illum voluptatem,ad dolor.</div>
  <div class="item">Odit  nostrum excepturi. Aspernatur, expedita impedit perferendis, pariatur aliquam sed facilis.</div>
  <div class="item">Cumque ipsam est </div>
  <div class="item">Nulla maxime veritatis, ut eveniet. Nobis ut consequatur cumque nulla totam nisi obcaecati, iste aliquam dolore minus consectetur, magni veritatis? Neque id, harum expedita, natus quas voluptatibus et molestias soluta!</div>
  <div class="item">Eveniet nostrum laudantium ea repellat voluptatem consectetur quis facere animi labore! Accusantium, pariatur possimus corporis quod placeat, doloribus eum labore velit maiores autem eius deserunt, inventore unde officiis consequatur quos.</div>
  <div class="item">Minima veniam non quis nihil placeat recusandae id exercitationem necessitatibus, esse ipsum aperiam asperiores ipsam quae sed quidem, nam neque nesciunt accusantium at, officia ipsa! Quae cumque quaerat minima eius!</div>
  <div class="item">Dolores nam obcaecati ratione quis impedit iste repudiandae optio est quod repellendus, facilis earum sapiente tempora recusandae, eligendi atque. Dolorem eius, consectetur similique at pariatur alias porro corporis quos perferendis.</div>
  <div class="item">Labore accusantium suscipit magnam magni modi iste molestias animi quo quisquam dolores, laborum delectus impedit ullam sequi, pariatur quidem architecto officia facilis, laboriosam deserunt eum. Quae deleniti illo, atque quas!</div>
  <div class="item">Assumenda nam unde minus aspernatur eius, atque quis odit, omnis, debitis velit porro consectetur dolorem nobis molestias nesciunt aut soluta. Voluptatem, aliquid distinctio blanditiis nemo, rem dignissimos tempora commodi id.</div>
</div>

style.css

.list {
  overflow: hidden;
}

.item {
  float: left;
  margin: 5px;
  width: calc(33% - 10px);
  border: 1px solid red;
}

.item:nth-child(3n+1) {
  background: #ccc;
  clear:left;
}

A simple grid layout system for variable height items when not using flex box.

This prevents the strange stacking that happens when you float:left a number of variable height items.

Can be used as a flexbox alternative when flex box is not available. Heights will not match but markup can stay the same