DumGrid For Responsive Inline-Block Grid Layout

DumGrid.css

/*
*
* Inline-Block CSS Responsive Grid System
*
* <!-- 2 Column with 10% Gutter -->
* <div class="grid column-45 gutter-10"></div>
* <div class="grid column-45"></div>
*
* <!-- 3 Column with 5% Gutter -->
* <div class="grid column-30 gutter-5"></div>
* <div class="grid column-30 gutter-5"></div>
* <div class="grid column-30"></div>
*
*/

.grid { display: inline-block; margin-left: -4px; vertical-align: top; 
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.column-1 { width: 1%; }
.column-2 { width: 2%; }
.column-3 { width: 3%; }
.column-4 { width: 4%; }
.column-5 { width: 5%; }
.column-6 { width: 6%; }
.column-7 { width: 7%; }
.column-8 { width: 8%; }
.column-9 { width: 9%; }
.column-10 { width: 10%; }
.column-11 { width: 11%; }
.column-12 { width: 12%; }
.column-13 { width: 13%; }
.column-14 { width: 14%; }
.column-15 { width: 15%; }
.column-16 { width: 16%; }
.column-17 { width: 17%; }
.column-18 { width: 18%; }
.column-19 { width: 19%; }
.column-20 { width: 20%; }
.column-21 { width: 21%; }
.column-22 { width: 22%; }
.column-23 { width: 23%; }
.column-24 { width: 24%; }
.column-25 { width: 25%; }
.column-26 { width: 26%; }
.column-27 { width: 27%; }
.column-28 { width: 28%; }
.column-29 { width: 29%; }
.column-30 { width: 30%; }
.column-31 { width: 31%; }
.column-32 { width: 32%; }
.column-33 { width: 33%; }
.column-34 { width: 34%; }
.column-35 { width: 35%; }
.column-36 { width: 36%; }
.column-37 { width: 37%; }
.column-38 { width: 38%; }
.column-39 { width: 39%; }
.column-40 { width: 40%; }
.column-41 { width: 41%; }
.column-42 { width: 42%; }
.column-43 { width: 43%; }
.column-44 { width: 44%; }
.column-45 { width: 45%; }
.column-46 { width: 46%; }
.column-47 { width: 47%; }
.column-48 { width: 48%; }
.column-49 { width: 49%; }
.column-50 { width: 50%; }
.column-51 { width: 51%; }
.column-52 { width: 52%; }
.column-53 { width: 53%; }
.column-54 { width: 54%; }
.column-55 { width: 55%; }
.column-56 { width: 56%; }
.column-57 { width: 57%; }
.column-58 { width: 58%; }
.column-59 { width: 59%; }
.column-60 { width: 60%; }
.column-61 { width: 61%; }
.column-62 { width: 62%; }
.column-63 { width: 63%; }
.column-64 { width: 64%; }
.column-65 { width: 65%; }
.column-66 { width: 66%; }
.column-67 { width: 67%; }
.column-68 { width: 68%; }
.column-69 { width: 69%; }
.column-70 { width: 70%; }
.column-71 { width: 71%; }
.column-72 { width: 72%; }
.column-73 { width: 73%; }
.column-74 { width: 74%; }
.column-75 { width: 75%; }
.column-76 { width: 76%; }
.column-77 { width: 77%; }
.column-78 { width: 78%; }
.column-79 { width: 79%; }
.column-80 { width: 80%; }
.column-81 { width: 81%; }
.column-82 { width: 82%; }
.column-83 { width: 83%; }
.column-84 { width: 84%; }
.column-85 { width: 85%; }
.column-86 { width: 86%; }
.column-87 { width: 87%; }
.column-88 { width: 88%; }
.column-89 { width: 89%; }
.column-90 { width: 90%; }
.column-91 { width: 91%; }
.column-92 { width: 92%; }
.column-93 { width: 93%; }
.column-94 { width: 94%; }
.column-95 { width: 95%; }
.column-96 { width: 96%; }
.column-97 { width: 97%; }
.column-98 { width: 98%; }
.column-99 { width: 99%; }
.column-100 { width: 100%; }


.gutter-1 { margin-right: 1%; }
.gutter-2 { margin-right: 2%; }
.gutter-3 { margin-right: 3%; }
.gutter-4 { margin-right: 4%; }
.gutter-5 { margin-right: 5%; }
.gutter-6 { margin-right: 6%; }
.gutter-7 { margin-right: 7%; }
.gutter-8 { margin-right: 8%; }
.gutter-9 { margin-right: 9%; }
.gutter-10 { margin-right: 10%; }
.gutter-11 { margin-right: 11%; }
.gutter-12 { margin-right: 12%; }
.gutter-13 { margin-right: 13%; }
.gutter-14 { margin-right: 14%; }
.gutter-15 { margin-right: 15%; }
.gutter-16 { margin-right: 16%; }
.gutter-17 { margin-right: 17%; }
.gutter-18 { margin-right: 18%; }
.gutter-19 { margin-right: 19%; }
.gutter-20 { margin-right: 20%; }
.gutter-21 { margin-right: 21%; }
.gutter-22 { margin-right: 22%; }
.gutter-23 { margin-right: 23%; }
.gutter-24 { margin-right: 24%; }
.gutter-25 { margin-right: 25%; }
.gutter-26 { margin-right: 26%; }
.gutter-27 { margin-right: 27%; }
.gutter-28 { margin-right: 28%; }
.gutter-29 { margin-right: 29%; }
.gutter-30 { margin-right: 30%; }
.gutter-31 { margin-right: 31%; }
.gutter-32 { margin-right: 32%; }
.gutter-33 { margin-right: 33%; }
.gutter-34 { margin-right: 34%; }
.gutter-35 { margin-right: 35%; }
.gutter-36 { margin-right: 36%; }
.gutter-37 { margin-right: 37%; }
.gutter-38 { margin-right: 38%; }
.gutter-39 { margin-right: 39%; }
.gutter-40 { margin-right: 40%; }
.gutter-41 { margin-right: 41%; }
.gutter-42 { margin-right: 42%; }
.gutter-43 { margin-right: 43%; }
.gutter-44 { margin-right: 44%; }
.gutter-45 { margin-right: 45%; }
.gutter-46 { margin-right: 46%; }
.gutter-47 { margin-right: 47%; }
.gutter-48 { margin-right: 48%; }
.gutter-49 { margin-right: 49%; }
.gutter-50 { margin-right: 50%; }​