Skip to content

Instantly share code, notes, and snippets.

@heygrady
Created April 22, 2012 06:14
Show Gist options
  • Save heygrady/2460901 to your computer and use it in GitHub Desktop.
Save heygrady/2460901 to your computer and use it in GitHub Desktop.
Fluid Grid
#container {
width: 960px;
margin: 0 auto;
}
[role="main"] {
width: auto;
margin: 0 0;
}
header, footer {
margin: 0 10px;
border: 1px solid black;
margin-bottom: 20px;
}
#left-column, #right-column {
margin: 0 10px;
float: left;
width: 218px;
border: 1px solid red;
}
#main-column {
margin: 0 10px;
float: left;
width: 700px;
}
#main-column > section {
width: auto;
margin: 0 -10px;
margin-bottom: 20px;
}
#main-column > section.hero {
border: 1px solid black;
margin-left: 0;
margin-right: 0;
}
#content {
margin: 0 10px;
float: left;
width: 458px;
border: 1px solid blue;
}
.clearfix, #container, [role="main"], #main-column > section {
*zoom: 1;
}
.clearfix:after, #container:after, [role="main"]:after, #main-column > section:after {
content: "";
display: table;
clear: both;
}
$grid-clearfix-class: false;
// import the grid
@import "grid";
// establishes page width and centers
#container {
@include grid-page;
}
// main page sections
[role="main"] {
@include grid-row(true); //true indicates a row is directly inside a page
}
// header and footer don't have columns in this example
header, footer {
margin: 0 $grid-gutter-width/2; // margins, like full-width columns
border: 1px solid black;
margin-bottom: $grid-gutter-width;
}
// side columns
#left-column, #right-column {
@include grid-column(3, -2px); //3 columns wide, adjust for border
border: 1px solid red;
}
// main column
#main-column {
@include grid-column(9); //9 columns wide
// sections in the main column are rows
> section {
@include grid-row;
margin-bottom: $grid-gutter-width;
}
// hero sections don't have columns in this example
> section.hero {
border: 1px solid black;
margin-left: 0; // remove the right and left margins because this isn't a row
margin-right: 0;
}
}
// center column
#content {
@include grid-column(6, -2px); //6 columns wide, adjust for border
border: 1px solid blue;
}
.clearfix { @include pie-clearfix; }
#container {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
max-width: 960px;
width: 100%;
margin: 0 auto;
}
[role="main"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: auto;
margin: 0 0;
}
header, footer {
margin: 0 1.0416667%;
border: 1px solid black;
margin-bottom: 20px;
}
.column, #left-column, #right-column, #main-column, #content {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
}
#left-column, #right-column {
border: 1px solid red;
}
#left-column {
width: 22.9166667%;
margin: 0 1.0416667%;
}
#right-column {
width: 30.5555556%;
margin: 0 1.3888889%;
}
#main-column {
width: 72.9166667%;
margin: 0 1.0416667%;
}
#main-column > section {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: auto;
margin: 0 -1.4285714%;
margin-bottom: 20px;
}
#main-column > section.hero {
border: 1px solid black;
margin-left: 0;
margin-right: 0;
}
#content {
width: 63.8888889%;
margin: 0 1.3888889%;
border: 1px solid blue;
}
.clearfix, #container, [role="main"], #main-column > section {
*zoom: 1;
}
.clearfix:after, #container:after, [role="main"]:after, #main-column > section:after {
content: "";
display: table;
clear: both;
}
$grid-clearfix-class: false; // don't auto create the clearfix
// import the grid
@import "grid/fluid";
// establishes page width and centers
#container {
@include fluid-page;
}
// main page sections
[role="main"] {
@include fluid-row(true); // row is directly inside a page
}
// header and footer don't have columns in this example
header, footer {
@include fluid-gutters; // gutters, like full-width columns
border: 1px solid black;
margin-bottom: $grid-gutter-width;
}
// column rules so that float and border-box aren't repeated
.column {
@include fluid-column($with-gutters: false); // omit gutters
}
// side columns
#left-column, #right-column {
@extend .column;
border: 1px solid red;
}
#left-column {
@include fluid(3); //3 columns wide, don't adjust for border
@include fluid-gutters; // gutters
}
#right-column {
@include fluid(3, 0, 9); //3 columns wide, 9 column parent, don't adjust for border
@include fluid-gutters(9); // gutters in a 9 column parent
}
// main column
#main-column {
@extend .column;
@include fluid(9); //9 columns wide
@include fluid-gutters; // gutters
// sections in the main column are rows
> section {
@include fluid-row(false, 9);
margin-bottom: $grid-gutter-width;
}
// hero sections don't have columns in this example
> section.hero {
border: 1px solid black;
margin-left: 0; // remove the right and left margins because this isn't a row
margin-right: 0;
}
}
// center column
#content {
@extend .column;
@include fluid(6, 0, 9); //6 columns wide, don't adjust for border
@include fluid-gutters(9); // gutters
border: 1px solid blue;
}
// define our own clearfix
.clearfix { @include pie-clearfix; }
...
<div id="container">
<header>
<h1>Header</h1>
<nav><a href="#">Nav Link</a></nav>
</header>
<div role="main">
<div id="left-column">Left Column</div>
<div id="main-column">
<section class="hero">
Hero Space, I take the full width
</section>
<section>
<article id="content">Actual Content</article>
<aside id="right-column">Right Column</aside>
</section>
</div>
</div>
<footer>
<p>&copy; Copyright 2011</p>
</footer>
</div>
...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment