Flexible and Simple Grid System.
Liquid Grid adjust itself accordandly to the container dimensions.
- Easy.
- Semantic & Expressive.
- Inspired in Jeet.gs
A grid with 3 collumns and 20px gutters:
In sass:
ul {
@include grid( 3, 20px );
li {
background-color: #ededed;
margin-bottom: 15px;
padding: 0 15px;
}
}
In stylus:
ul
grid( 3, 20px );
li
background-color: #ededed;
margin-bottom: 15px;
padding: 0 15px;
Output ( container with 800px )
A collumn with different size:
In Sass:
ul {
@include grid( 3, 20px );
li {
background-color: #ededed;
margin-bottom: 15px;
padding: 0 15px;
&.double {
@include col( 2/3 );
}
}
}
In Stylus:
ul
grid( 3, 20px );
li
background-color: #ededed;
margin-bottom: 15px;
padding: 0 15px;
&.double
col( 2/3 );
Output ( container with 600px )
If gutter is not passed in .col(), it will inherit from .grid() gutter's value ( default = 0 ).
- Should work on IE9+