While working on my 24 column grid system, I had the idea to put together a quick grid system that allows for 3 column and 4 column websites without all the extra css of 12, 16, and 24 column systems. It has fluid capabilities, and is considerably responsive. Rather than working with a 12, 16, or 24 column wide system, it takes the same approach my 24 column grid is going: the width is 1 unit wide, and the classes use fractions such as: .offset-1/3.span-2/3
.container{position:relative;width:960px;margin:0 auto;padding:0;} .container.fluid{width:100%} .container .column{float:left;display:inline;margin-left:10px;margin-right:10px;} .container .column.fluid{margin-left:1%;margin-right:1%} .container .column .relative{position:relative} .container .column>:first-child{margin-left:0 !important} .container .column>:last-child{margin-right:0 !important} .row{zoom:1;margin-bottom:20px} .row:before,.row:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0} .row:after{clear:both} .span-\31 \2F 4{width:220px;} .span-\31 \2F 4.fluid{width:23%} .span-\31 \2F 3{width:300px;} .span-\31 \2F 3.fluid{width:31%} .span-\31 \2F 2,.span-\32 \2F 4{width:460px;} .span-\31 \2F 2.fluid,.span-\32 \2F 4.fluid{width:48%} .span-\32 \2F 3{width:620px;} .span-\32 \2F 3.fluid{width:64%} .span-\33 \2F 4{width:700px;} .span-\33 \2F 4.fluid{width:73%} .span-1{width:940px;} .span-1.fluid{width:98%} .offset-\31 \2F 4{margin-left:230px;} .offset-\31 \2F 4.fluid{margin-left:24%} .offset-\31 \2F 3{margin-left:width 310px;} .offset-\31 \2F 3.fluid{margin-left:32%} .offset-\31 \2F 2,.offset-\32 \2F 4{margin-left:470px;} .offset-\31 \2F 2.fluid,.offset-\32 \2F 4.fluid{margin-left:49%} .offset-\32 \2F 3{margin-left:630px;} .offset-\32 \2F 3.fluid{margin-left:65%} .offset-\33 \2F 4{margin-left:710px;} .offset-\33 \2F 4.fluid{margin-left:74%} @media only screen and (min-width: 768px) and (max-width: 959px){.container{width:768px;} .container .column{margin-left:8px;margin-right:8px} .span-\31 \2F 4{width:176px} .span-\31 \2F 3{width:240px} .span-\31 \2F 2,.span-\32 \2F 4{width:368px} .span-\32 \2F 3{width:496px} .span-\33 \2F 4{width:560px} .span-1{width:768px} .offset-\31 \2F 4{margin-left:184px} .ofset-\31 \2F 3{margin-left:width 248px} .offset-\31 \2F 2,.offset-\32 \2F 4{margin-left:376px} .offset-\32 \2F 3{margin-left:504px} .offset-\33 \2F 4{margin-left:568px} }@media only screen and (max-width: 767px){.container{width:100%;} .container .column{width:100% !important;margin:2px 0 !important} }
