Skip to content

Instantly share code, notes, and snippets.

@adampatterson
Created October 4, 2023 14:37
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 adampatterson/601f766129ae482c909f4a1ba05dd66b to your computer and use it in GitHub Desktop.
Save adampatterson/601f766129ae482c909f4a1ba05dd66b to your computer and use it in GitHub Desktop.
960.gs in Grid
.container_16 {
display: grid;
grid-template-columns: repeat(16, 50px [col-start]);
gap: 10px;
width: 960px;
margin-left: auto;
margin-right: auto;
}
/* Define grid column spans */
.grid_1 { grid-column: span 1; }
.grid_2 { grid-column: span 2; }
.grid_3 { grid-column: span 3; }
.grid_4 { grid-column: span 4; }
.grid_5 { grid-column: span 5; }
.grid_6 { grid-column: span 6; }
.grid_7 { grid-column: span 7; }
.grid_8 { grid-column: span 8; }
.grid_9 { grid-column: span 9; }
.grid_10 { grid-column: span 10; }
.grid_11 { grid-column: span 11; }
.grid_12 { grid-column: span 12; }
.grid_13 { grid-column: span 13; }
.grid_14 { grid-column: span 14; }
.grid_15 { grid-column: span 15; }
/* Push classes */
.push_1 { grid-column-start: 2; }
.push_2 { grid-column-start: 3; }
.push_3 { grid-column-start: 4; }
.push_4 { grid-column-start: 5; }
.push_5 { grid-column-start: 6; }
.push_6 { grid-column-start: 7; }
.push_7 { grid-column-start: 8; }
.push_8 { grid-column-start: 9; }
.push_9 { grid-column-start: 10; }
.push_10 { grid-column-start: 11; }
.push_11 { grid-column-start: 12; }
.push_12 { grid-column-start: 13; }
.push_13 { grid-column-start: 14; }
.push_14 { grid-column-start: 15; }
/* ... up to .push_15 ... */
/* Pull classes */
.pull_1 { grid-column-end: span -1; }
.pull_2 { grid-column-end: span -2; }
.pull_3 { grid-column-end: span -3; }
.pull_4 { grid-column-end: span -4; }
.pull_5 { grid-column-end: span -5; }
.pull_6 { grid-column-end: span -6; }
.pull_7 { grid-column-end: span -7; }
.pull_8 { grid-column-end: span -8; }
.pull_9 { grid-column-end: span -9; }
.pull_10 { grid-column-end: span -10; }
.pull_11 { grid-column-end: span -11; }
.pull_12 { grid-column-end: span -12; }
.pull_13 { grid-column-end: span -13; }
.pull_14 { grid-column-end: span -14; }
.pull_15 { grid-column-end: span -15; }
/* ... up to .pull_15 ... */
.grid_row {
grid-column: 1 / -1; /* This makes the item span the entire width of the grid */
/* Additional styling as necessary */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment