[Calc() - Quick and Dirty Grid System] Quick and dirty grid system using calc #css #grid

css

/*Setup Environment */
html                 { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
body                 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:16px; margin:0; padding:0; }
.block               { float:left; display:inline-block; background-color:#999999; color:#000000; font-size:0.8em; text-align:center; line-height:4em; border:1px solid white;  }

/*
Calc Demo Quick and Dirty Fluid Grid system
--
If we need a quick grid system to test, apply to a legacy or internal system in a hurry, calc makes it so simple.

*/

.row                 { width:100%;  margin-bottom:10px; }
.row:before,
.row:after           { content: " "; display: table; }
.row:after           { clear: both; }

/*
All we do is:
 - Set the width to 100%
 - Divide by the total column number
 - Multiply the result by the number of columns we need.
*/

.col-1              { width:calc(100% / 5 * 1); }
.col-2              { width:calc(100% / 5 * 2); }
.col-3              { width:calc(100% / 5 * 3); }
.col-4              { width:calc(100% / 5 * 4); }
.col-5              { width:calc(100% / 5 * 5); }

html

<div class="row">
  <div class="block col-2">2 columns</div>
  <div class="block col-3">3 columns</div>
</div>

<div class="row">
  <div class="block col-1">1 column</div>
  <div class="block col-4">4 columns</div>
</div>

<div class="row">
  <div class="block col-5">5 columns</div>
</div>