Skip to content

Instantly share code, notes, and snippets.

@renatocarvalho
Created March 20, 2014 15:20
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 renatocarvalho/9666181 to your computer and use it in GitHub Desktop.
Save renatocarvalho/9666181 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="home-grid">
<div class="moduletable">
<p>Hi there!</p>
</div>
<div class="moduletable">
<p>Hi there!</p>
</div>
<div class="moduletable">
<p>Hi there!</p>
</div>
<div class="moduletable">
<p>Hi there!</p>
</div>
<div class="moduletable">
<p>Hi there!</p>
</div>
<div class="moduletable">
<p>Hi there!</p>
</div>
<div class="moduletable">
<p>Hi there!</p>
</div>
<div class="moduletable">
<p>Hi there!</p>
</div>
<div class="moduletable">
<p>Hi there!</p>
</div>
</div>
// ----
// Sass (v3.2.14)
// Compass (v0.12.3)
// Bourbon (v3.1.8)
// Neat (v1.5.0)
// ----
@import bourbon/bourbon
@import neat/neat
.home-grid
@include row
.moduletable
@include span-columns(4, block-collapse)
@include omega(3n)
background-color: red
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.home-grid {
*zoom: 1;
display: block;
}
.home-grid:before, .home-grid:after {
content: " ";
display: table;
}
.home-grid:after {
clear: both;
}
.moduletable {
float: left;
display: block;
width: 34.11922%;
background-color: red;
}
.moduletable:last-child {
width: 31.76157%;
}
.moduletable:nth-child(3n) {
margin-right: 0;
}
.moduletable:nth-child(3n+1) {
clear: left;
}
<div class="home-grid">
<div class="moduletable">
<p>Hi there!</p>
</div>
<div class="moduletable">
<p>Hi there!</p>
</div>
<div class="moduletable">
<p>Hi there!</p>
</div>
<div class="moduletable">
<p>Hi there!</p>
</div>
<div class="moduletable">
<p>Hi there!</p>
</div>
<div class="moduletable">
<p>Hi there!</p>
</div>
<div class="moduletable">
<p>Hi there!</p>
</div>
<div class="moduletable">
<p>Hi there!</p>
</div>
<div class="moduletable">
<p>Hi there!</p>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment