Skip to content

Instantly share code, notes, and snippets.

@rgadon107
Created February 16, 2016 00:01
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 rgadon107/a99469acd5767247bb7a to your computer and use it in GitHub Desktop.
Save rgadon107/a99469acd5767247bb7a to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="parent">
<h4 class="title">Title</h4>
<div class="child">Child 1</div>
<div class="child">Child 2</div>
<div class="child">Child 3</div>
<div class="child">Child 4</div>
<div class="child">Child 5</div>
<div class="child">Child 6</div>
</div>
// ----
// libsass (v3.2.5)
// ----
@import "bourbon/bourbon";
@import "neat/neat";
.parent {
@include outer-container;
border: 1px solid blue;
padding: 1em 1em 0;
}
.child {
@include span-columns(6);
@include omega("2n + 1");
border: 1px solid red;
margin-bottom: 1em;
padding: 1em;
text-align: center;
}
html {
box-sizing: border-box;
}
*,
*::after,
*::before {
box-sizing: inherit;
}
.parent {
max-width: 68em;
margin-left: auto;
margin-right: auto;
border: 1px solid blue;
padding: 1em 1em 0;
}
.parent::after {
clear: both;
content: "";
display: table;
}
.child {
float: left;
display: block;
margin-right: 2.35765%;
width: 48.82117%;
border: 1px solid red;
margin-bottom: 1em;
padding: 1em;
text-align: center;
}
.child:last-child {
margin-right: 0;
}
.child:nth-child(2n + 1) {
margin-right: 0;
}
<div class="parent">
<h4 class="title">Title</h4>
<div class="child">Child 1</div>
<div class="child">Child 2</div>
<div class="child">Child 3</div>
<div class="child">Child 4</div>
<div class="child">Child 5</div>
<div class="child">Child 6</div>
</div>
@rgadon107
Copy link
Author

Exploring 2-columns x 3-rows using Sassmeister. Investigating which way the child elements loaded (LTR, top-row downward). Note: .child:nth-child(2n+1) is similar to neat.io's omega("2n+1") function.

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