Creating a grid
Let’s take a closer look at a primitive layout example we see every day:
row
that clears all the floats properly. Don’t forget about it.Navigation
Content
/* The clearfix hack is a popular way to contain floats without resorting
* to using presentational markup.
* Credits: http://nicolasgallagher.com/micro-clearfix-hack */
.row {
*zoom: 1;
}
.row:before,
.row:after {
display: table;
content: "";
line-height: 0;
}
.row:after {
clear: both;
}
/* Reserved classes for columns */
.col1of3, .col2of3 {
float: left;
}
.col1of3 {
width: 33.33333%;
}
.col2of3 {
width: 66.66666%;
}
.col1of3
, .col2of3
. All of them have float: left to behave like floats and width: xx% where xx is a percentage value from 0 to 100.We’ve also reserved .row
(clearfix hack) which is a popular way to contain floats without resorting to using presentational markup.After inserting some test data inside, let’s take a look at the result.Organizing more complex grids

.row
. Let’s take a look.Spaces
Now we know how to create fluid layouts, but usually you need to add some space between columns or blocks inside each column. Use spaces for that.Block with margin-bottom of the large size.
/* Should be used to modify the default spacing between objects (not between nodes of the same object)
* a, t, r, b, l, h, v = all, top, right, bottom, left, horizontal, vertical
* x, s, m, l, n = 3px, 5px, 10px, 20px, none
* p, m = padding, margin */
.mbl {
margin-bottom: 20px;
}
/* Large Padding size for all sides */
.ptl, .pvl, .pal { padding-top: 20px; }
.prl, .phl, .pal { padding-right: 20px; }
.pbl, .pvl, .pal { padding-bottom: 20px; }
.pll, .phl, .pal { padding-left: 20px; }
/* Large Margin size for all sides */
.mtl, .mvl, .mal { margin-top: 20px; }
.mrl, .mhl, .mal { margin-right: 20px; }
.mbl, .mvl, .mal { margin-bottom: 20px; }
.mll, .mhl, .mal { margin-left: 20px; }
TIP: Railsware site is based on a such grids + spaces system. Feel free to go and inspect the source and learn how we built it.We’re not going to cover responsive layouts here since it’s worth writing additional post about it.