Css calc() can use like Grid.Just see the demo below:

This is html code

<div class="calcDiv1">This is 100% width</div>
<div class="testContainer">
    <div class="calcDiv2">1/3 width</div>
    <div class="calcDiv2">1/3 width</div>
    <div class="calcDiv2">1/3 width</div>
</div>
<div class="calcDiv3">100% - 110px</div>
<div class="calcDiv4">100px</div>
<div class="testContainer2">
    <div class="calcDiv5">50% - 5px</div>
    <div class="calcDiv5">50% - 5px</div>
</div>

1/3 width grid

.calcDiv2 {background: #c00;float:left;width:calc((100% - 20px)/3);}
.testContainer div:nth-child(2) {background:purple;margin-left: 10px;}
.testContainer div:nth-child(3) {margin-left: 10px;}

Every div width is : (100% - 20px)/3 .20px is for margin-left.

left|right grid

.calcDiv3 {background: #093;width:calc(100% - 110px);float:left;color:}
.calcDiv4 {background: #093;width:100px;float:left;margin-left: 10px;}

The right column width is fixed 100px.Other space for left Column(100% - 110px).10 px for margin-left

50% width and another writing for margin-left

.calcDiv5 {background: #039;width:calc(50% - 5px);float:left;}
.testContainer2 .calcDiv5:not(:first-child) {margin-left:10px;}

All the other(not first) set margin-left:10px

what’s more?

I also tried

<style>
.testContainer3 {counter-reset:kkk;}
.testContainer3 div {background:#ddd;margin-bottom: 6px;padding-left:6px;letter-spacing: 10px;}
.testContainer3 div {counter-increment:kkk;}
.testContainer3 div:before {content:counter(kkk);}
.testContainer3 div:after {content:attr(data-size);}
.testContainer3 div {font-size:calc(counter(kkk) * 12px)}
.testContainer3 div {font-size:calc(attr(data-size) * 12px);}
</style>

<div class="testContainer3">
    <div data-size="2"></div>
    <div data-size="3"></div>
</div>

As you see below.Neither counter or attr works till today(2013-05-05)!But wait,soon or later the new browser will done.