Skip to content

Instantly share code, notes, and snippets.

@edgar971

edgar971/grid

Created April 11, 2015 04:11
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 edgar971/4a0a28b10760789ab7e9 to your computer and use it in GitHub Desktop.
Save edgar971/4a0a28b10760789ab7e9 to your computer and use it in GitHub Desktop.
Download ZIP
A Dynamic Columns in CSS
Raw
grid
.columns {
> * {
float: left;
}
//1 columnn
> *:nth-child(1):nth-last-child(1) {
width: 100% ;
}
//2 columnns
> *:nth-child(1):nth-last-child(2),
> *:nth-child(2):nth-last-child(1) {
width: 50%;
}
//3 columnns
> *:nth-child(1):nth-last-child(3),
> *:nth-child(2):nth-last-child(2),
> *:nth-child(3):nth-last-child(1) {
width: 33.3333333%;
}
//4 columnns
> *:nth-child(1):nth-last-child(4),
> *:nth-child(2):nth-last-child(3),
> *:nth-child(3):nth-last-child(2),
> *:nth-child(4):nth-last-child(1) {
width: 25%;
}
//5 columnns
> *:nth-child(1):nth-last-child(5),
> *:nth-child(2):nth-last-child(4),
> *:nth-child(3):nth-last-child(3),
> *:nth-child(4):nth-last-child(2),
> *:nth-child(5):nth-last-child(1) {
width: 20%;
}
//6 columnns
> *:nth-child(1):nth-last-child(6),
> *:nth-child(2):nth-last-child(5),
> *:nth-child(3):nth-last-child(4),
> *:nth-child(4):nth-last-child(3),
> *:nth-child(5):nth-last-child(2),
> *:nth-child(6):nth-last-child(1) {
width: 16.666666%;
}
//7 columnns
> *:nth-child(1):nth-last-child(7),
> *:nth-child(2):nth-last-child(6),
> *:nth-child(3):nth-last-child(5),
> *:nth-child(4):nth-last-child(4),
> *:nth-child(5):nth-last-child(3),
> *:nth-child(6):nth-last-child(2),
> *:nth-child(7):nth-last-child(1) {
width: 14.28571%;
}
//8 columnns
> *:nth-child(1):nth-last-child(8),
> *:nth-child(2):nth-last-child(7),
> *:nth-child(3):nth-last-child(6),
> *:nth-child(4):nth-last-child(5),
> *:nth-child(5):nth-last-child(4),
> *:nth-child(6):nth-last-child(3),
> *:nth-child(7):nth-last-child(2),
> *:nth-child(8):nth-last-child(1) {
width: 12.5%;
}
//9 columnns
> *:nth-child(1):nth-last-child(9),
> *:nth-child(2):nth-last-child(8),
> *:nth-child(3):nth-last-child(7),
> *:nth-child(4):nth-last-child(6),
> *:nth-child(5):nth-last-child(5),
> *:nth-child(6):nth-last-child(4),
> *:nth-child(7):nth-last-child(3),
> *:nth-child(8):nth-last-child(2),
> *:nth-child(9):nth-last-child(1) {
width: 11.111111111%;
}
//10 columnns
> *:nth-child(1):nth-last-child(10),
> *:nth-child(2):nth-last-child(9),
> *:nth-child(3):nth-last-child(8),
> *:nth-child(4):nth-last-child(7),
> *:nth-child(5):nth-last-child(6),
> *:nth-child(6):nth-last-child(5),
> *:nth-child(7):nth-last-child(4),
> *:nth-child(8):nth-last-child(3),
> *:nth-child(9):nth-last-child(2),
> *:nth-child(10):nth-last-child(1) {
width: 10%;
}
//11 columnns
> *:nth-child(1):nth-last-child(11),
> *:nth-child(2):nth-last-child(10),
> *:nth-child(3):nth-last-child(9),
> *:nth-child(4):nth-last-child(8),
> *:nth-child(5):nth-last-child(7),
> *:nth-child(6):nth-last-child(6),
> *:nth-child(7):nth-last-child(5),
> *:nth-child(8):nth-last-child(4),
> *:nth-child(9):nth-last-child(3),
> *:nth-child(10):nth-last-child(2),
> *:nth-child(11):nth-last-child(1) {
width: 9.0909090909%;
}
//12 columnns
> *:nth-child(1):nth-last-child(12),
> *:nth-child(2):nth-last-child(11),
> *:nth-child(3):nth-last-child(10),
> *:nth-child(4):nth-last-child(9),
> *:nth-child(5):nth-last-child(8),
> *:nth-child(6):nth-last-child(7),
> *:nth-child(7):nth-last-child(6),
> *:nth-child(8):nth-last-child(5),
> *:nth-child(9):nth-last-child(4),
> *:nth-child(10):nth-last-child(3),
> *:nth-child(11):nth-last-child(2),
> *:nth-child(12):nth-last-child(1) {
width: 8.3333333333%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment