A 24-col solid grid for SASS

See on Github



Customize your grid

You are able to specify a few variables to custom your grid,
adding those lines to your main SASS file :

$sg-nb-columns:   24;   // columns number
$sg-class-prefix: '';   // class prefix
$sg-column-width: 30px; // columns width
$sg-gutter-width: 10px; // space between columns
$sg-margin-width: 5px;  // space around rows


<!-- .row class on your wrapper -->
<div class="row">
	<!-- both .col and .col-x classes on your columns -->
	<div class="col col-4"></div>
	<!-- .offset-x classes to manage empty columns -->
	<!-- .break class to add a new line -->
	<div class="col col-18 offset-2 break">
		<!-- you can use nested columns -->
		<div class="col col-6"></div>
		<div class="col col-6"></div>
		<div class="col col-6"></div>
	<div class="col col-12"></div>
	<div class="col col-12"></div>


Basic usage


Nested columns

Nested columns + offsets

Find 24SSgrid useful ? Share it !