Responsive grids for your site or app.
<div class='grid_container'>
<div class='grid_base_12'>
<div class='grid_col_12'>
12
</div> <!-- /grid_col_12 -->
<div class='grid_col_6'>
6
</div> <!-- /grid_col_6 -->
<div class='grid_col_6'>
6
</div> <!-- /grid_col_6 -->
<div class='grid_col_4'>
4
</div> <!-- /grid_col_4 -->
<div class='grid_col_4'>
4
</div> <!-- /grid_col_4 -->
<div class='grid_col_4'>
4
</div> <!-- /grid_col_4 -->
<div class='grid_col_3'>
3
</div> <!-- /grid_col_3 -->
<div class='grid_col_3'>
3
</div> <!-- /grid_col_3 -->
<div class='grid_col_3'>
3
</div> <!-- /grid_col_3 -->
<div class='grid_col_3'>
3
</div> <!-- /grid_col_3 -->
</div> <!-- /grid_base_12 -->
</div> <!-- /grid_container -->
/* -----------------------------
Clearfix
----------------------------- */
.clearfix, .grid_base_12, .grid_container {
zoom: 1;
}
.clearfix:before, .grid_base_12:before, .grid_container:before, .clearfix:after, .grid_base_12:after, .grid_container:after {
content: " ";
display: table;
}
.clearfix:after, .grid_base_12:after, .grid_container:after {
clear: both;
}
/* -----------------------------
Sassy Grid mixin
@author: Frej Raahede Nielsen
@documentation: http://springload.github.com/sassy-grid/
----------------------------- */
.grid_container {
max-width: 970px;
}
.ie7 .grid_container, .ie6 .grid_container {
/* Locking IE6 and IE7 due to sub-pixel rounding issue */
width: 970px;
}
.grid_base_12 {
padding-left: 6.7%;
padding-right: 6.7%;
}
.grid_base_12 .grid_col_1, .grid_base_12 .grid_col_3, .grid_base_12 .grid_col_4, .grid_base_12 .grid_col_6, .grid_base_12 .grid_col_12, .overlay_grid .grid_col_1 {
margin-left: 1.78%;
margin-right: 1.78%;
}
.grid_base_12 .grid_col_1, .overlay_grid .grid_col_1 {
width: 4.76%;
}
.grid_base_12 .grid_col_3 {
width: 21.42%;
}
.grid_base_12 .grid_col_4 {
width: 29.76%;
}
.grid_base_12 .grid_col_6 {
width: 46.42%;
}
.grid_base_12 .grid_col_12 {
width: 96.42%;
}
/* IE6 fix: fixes double margin on floated elements */
.ie6 .grid_base_12 .grid_col_1, .grid_base_12 .ie6 .grid_col_1, .ie6 .grid_base_12 .grid_col_3, .grid_base_12 .ie6 .grid_col_3, .ie6 .grid_base_12 .grid_col_4, .grid_base_12 .ie6 .grid_col_4, .ie6 .grid_base_12 .grid_col_6, .grid_base_12 .ie6 .grid_col_6, .ie6 .grid_base_12 .grid_col_12, .grid_base_12 .ie6 .grid_col_12, .ie6 .overlay_grid .grid_col_1, .overlay_grid .ie6 .grid_col_1 {
display: inline;
}
.grid_base_12 .grid_col_1, .grid_base_12 .grid_col_3, .grid_base_12 .grid_col_4, .grid_base_12 .grid_col_6, .grid_base_12 .grid_col_12, .overlay_grid .grid_col_1 {
float: left;
}
.main .grid_base_12 .grid_col_1, .grid_base_12 .main .grid_col_1, .main .grid_base_12 .grid_col_3, .grid_base_12 .main .grid_col_3, .main .grid_base_12 .grid_col_4, .grid_base_12 .main .grid_col_4, .main .grid_base_12 .grid_col_6, .grid_base_12 .main .grid_col_6, .main .grid_base_12 .grid_col_12, .grid_base_12 .main .grid_col_12, .main .overlay_grid .grid_col_1, .overlay_grid .main .grid_col_1 {
padding-bottom: 2em;
}
.grid_container {
margin-left: auto;
margin-right: auto;
min-width: 640px;
}
/* ------------------------------------------------------------- *
* Demo styles
* ------------------------------------------------------------- */
.grid_base_12 .grid_col_1, .grid_base_12 .grid_col_3, .grid_base_12 .grid_col_4, .grid_base_12 .grid_col_6, .grid_base_12 .grid_col_12, .overlay_grid .grid_col_1 {
background: #D8E6FF;
text-align: center;
line-height: 40px;
min-height: 40px;
margin-bottom: 15px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
}
.overlay_grid .grid_base_12 {
height: 100%;
}
.overlay_grid .grid_col_1 {
background: none;
}
// -------------------------------------------------------------
// Importing grid core and clearfix
// --------------------------------
@import '../../externals/sassy-grid/sass/grid-core';
@import '../../externals/sassy-grid/sass/clearfix';
// -------------------------------------------------------------
// Basic grid settings
// -------------------
$degredation-selector: '.no_media_queries';
$ie6-selector: '.ie6';
$grid-debug: false;
// -------------------------------------------------------------
// Defining the grid
// -----------------
@include define-grid-settings(
$grid-name: 'demo-grid',
$is-fluid: true,
$column-width: 40,
$gutter-width: 30,
$gutter-property: 'margin',
$num-columns: 12,
$padding-left: 80,
$padding-right: 80
);
// -------------------------------------------------------------
// Applying the grid
// -----------------
@include apply-grid(
$use-grid: 'demo-grid',
$container-selector: '.grid_container',
$row-selector: '.grid_base_12',
$row-extend-selectors: '%grid_row',
$column-selector-prefix: '.grid_col_',
$column-extend-selectors: '%grid_col',
$output-column-styles-for: 1 3 4 6 12
);
// -------------------------------------------------------------
// Basic grid styles
// -----------------
%grid_row{
@include clearfix;
}
%grid_col {
float: left;
.main &{
padding-bottom: 2em;
}
}
.grid_container{
@include clearfix;
margin-left: auto;
margin-right: auto;
min-width: 640px;
}
/* ------------------------------------------------------------- *
* Demo styles
* ------------------------------------------------------------- */
%grid_col{
background: #D8E6FF;
text-align: center;
line-height: 40px;
min-height: 40px;
margin-bottom: 15px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
}
.overlay_grid{
.grid_base_12{
height: 100%;
}
.grid_col_1{
@extend %grid_col;
@include span-columns( $columns: 1, $grid-name: 'demo-grid' );
background: none;
}
}
Get the SaSS project from the repo:
https://github.com/springload/sassy-grid.git
Here's a 12 column fluid grid to get you started.
// -------------------------------------------------------------
// Importing grid core and clearfix
// --------------------------------
@import '../../externals/sassy-grid/sass/grid-core';
@import '../../externals/sassy-grid/sass/clearfix';
// -------------------------------------------------------------
// Basic grid settings
// -------------------
$degredation-selector: '.no_media_queries';
$ie6-selector: '.ie6';
$grid-debug: false;
// -------------------------------------------------------------
// Defining the grid
// -----------------
@include define-grid-settings(
$grid-name: 'demo-grid',
$is-fluid: true,
$column-width: 40,
$gutter-width: 30,
$gutter-property: 'margin',
$num-columns: 12,
$padding-left: 80,
$padding-right: 80
);
// -------------------------------------------------------------
// Applying the grid
// -----------------
@include apply-grid(
$use-grid: 'demo-grid',
$container-selector: '.grid_container',
$row-selector: '.grid_base_12',
$row-extend-selectors: '%grid_row',
$column-selector-prefix: '.grid_col_',
$column-extend-selectors: '%grid_col',
$output-column-styles-for: 1 3 4 6 12
);
// -------------------------------------------------------------
// Basic grid styles
// -----------------
%grid_row{
@include clearfix;
}
%grid_col {
float: left;
.main &{
padding-bottom: 2em;
}
}
.grid_container{
@include clearfix;
margin-left: auto;
margin-right: auto;
min-width: 640px;
}
/* ------------------------------------------------------------- *
* Demo styles
* ------------------------------------------------------------- */
%grid_col{
background: #D8E6FF;
text-align: center;
line-height: 40px;
min-height: 40px;
margin-bottom: 15px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
}
.overlay_grid{
.grid_base_12{
height: 100%;
}
.grid_col_1{
@extend %grid_col;
@include span-columns( $columns: 1, $grid-name: 'demo-grid' );
background: none;
}
}
<div class='grid_container'>
<div class='grid_base_12'>
<div class='grid_col_12'>
12
</div> <!-- /grid_col_12 -->
<div class='grid_col_6'>
6
</div> <!-- /grid_col_6 -->
<div class='grid_col_6'>
6
</div> <!-- /grid_col_6 -->
<div class='grid_col_4'>
4
</div> <!-- /grid_col_4 -->
<div class='grid_col_4'>
4
</div> <!-- /grid_col_4 -->
<div class='grid_col_4'>
4
</div> <!-- /grid_col_4 -->
<div class='grid_col_3'>
3
</div> <!-- /grid_col_3 -->
<div class='grid_col_3'>
3
</div> <!-- /grid_col_3 -->
<div class='grid_col_3'>
3
</div> <!-- /grid_col_3 -->
<div class='grid_col_3'>
3
</div> <!-- /grid_col_3 -->
</div> <!-- /grid_base_12 -->
</div> <!-- /grid_container -->
How to embed one grid in another without loosing alignment. How to embed one grid in another without loosing alignment.
How to customize the selectors for container, rows and columns in a grid. How to customize the selectors for container, rows and columns in a grid.
Breaking a columm-level element out to the borders of the grid. Breaking a columm-level element out to the borders of the grid.
Columns breaking to span a different column amount on @media breakpoints. Columns breaking to span a different column amount on @media breakpoints.
Content blocks that change width to fit the window. Based on a 60 column grid to cater for 5, 4, 3, 2 and 1 columns. Content blocks that change width to fit the window. Based on a 60 column grid to cater for 5, 4, 3, 2 and 1 columns.
Simple 12 column static grid. Simple 12 column static grid.
12 column fluid grid with a minimum width set. 12 column fluid grid with a minimum width set.