Skip to content

Instantly share code, notes, and snippets.

@ryanve
Last active March 6, 2017 02:19
Show Gist options
  • Save ryanve/3ea0d73079794c0955dc to your computer and use it in GitHub Desktop.
Save ryanve/3ea0d73079794c0955dc to your computer and use it in GitHub Desktop.
Bourbon Neat mixin for Lea Verou's styling columns by sibling count technique
.is-sibling-grid {
margin-left: auto;
margin-right: auto;
padding-left: 0;
padding-right: 0;
}
.is-sibling-grid > :only-child {
display: block;
width: 100%;
}
.is-sibling-grid > :not(:first-child) {
margin-left: flex-gutter();
}
@each $n in (2, 3, 4) {
.is-sibling-grid > :first-child:nth-last-child(#{$n}),
.is-sibling-grid > :first-child:nth-last-child(#{$n}) ~ * {
display: block;
width: flex-grid($grid-columns/$n);
float: left;
}
}
@ryanve
Copy link
Author

ryanve commented Sep 10, 2015

@ryanve
Copy link
Author

ryanve commented Mar 6, 2017

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