Skip to content

Instantly share code, notes, and snippets.

@veganista
Created February 6, 2015 12:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save veganista/366cb3e258f0dc070e26 to your computer and use it in GitHub Desktop.
Save veganista/366cb3e258f0dc070e26 to your computer and use it in GitHub Desktop.
Simple Grid Layout
<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>
.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;
}
@veganista
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment