Skip to content

Instantly share code, notes, and snippets.

@bearded-avenger
Created February 22, 2015 14:49
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bearded-avenger/3a7c2c05d0bd45c754e2 to your computer and use it in GitHub Desktop.
Save bearded-avenger/3a7c2c05d0bd45c754e2 to your computer and use it in GitHub Desktop.
Grid Layout - CSS - nth child
// this targets 1,5,7,11,13,17,19...
.ale--66 {
&:nth-child(6n+1),
&:nth-child(6n+5){
width:66.666%;
}
}
// this targets - 2,4,8,10,14,16,20....
.ale--33 {
&:nth-child(6n+4),
&:nth-child(6n+2) {
width:33.333%;
}
}
.ale--clear__float{
&:nth-child(3n+1),
&:nth-child(3n+2) {
height:200px;
float: left;
}
}
.ale--full {
&:nth-child(3n+3) {
clear: left;
width:100%;
height:300px;
// bump the height of every other full up to 500px
&:nth-child(odd) {
height:500px;
}
}
}
@bearded-avenger
Copy link
Author

@peiche
Copy link

peiche commented Feb 23, 2015

I was trying to do this, couldn't work it out. You're awesome.

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