Skip to content

Instantly share code, notes, and snippets.

@jmblog
Created May 10, 2011 02:34
Show Gist options
  • Save jmblog/963825 to your computer and use it in GitHub Desktop.
Save jmblog/963825 to your computer and use it in GitHub Desktop.
1kb_grid.scss
/*
1kb_grid.scss
This SCSS is based on "The 1Kb CSS Grid".
Learn more ~ http://www.1kbgrid.com/
*/
/* Grid Settings
---------------------------*/
$columns: 12; // Number of columns (9, 10, 12, 14 or 16)
$col_width: 60px; // Column width (40px, 60px or 80px)
$gutter: 20px; // Gutter width (10px or 20px)
$cell_width: $col_width + $gutter;
/* The 1Kb Grid
---------------------------*/
@for $i from 1 through $columns {
.grid_#{$i} { width: $col_width + $cell_width * ($i - 1); }
}
.column {
margin: 0 $gutter / 2;
overflow: hidden;
float: left;
display: inline;
}
.row {
width: $columns * ($col_width + $gutter);
margin: 0 auto;
overflow: hidden;
}
.row .row {
margin: 0 0 - ($gutter / 2);
width: auto;
display: inline-block;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment