1kb_grid_extended.scss

1kb_grid_extended.scss

/*
  1kb_grid_extended.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);
        @extend .column;
    }
}

.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;
}