CSS: How to create colsgroup like semantic-ui way

CSS: How to create colsgroup like semantic-ui way

the jsbin is here: http://jsbin.com/uMEjOV/1/edit
Hi, in semantic UI, (http://semantic-ui.com) we could create:
<div class="ui three column grid">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
</div>
i try to create my own without semantic-ui famework:
<div class="colsgroup">
<div class="column">col 1</div>
<div class="column">col 2</div>
<div class="column">col 3</div>
<!-- but i need extra class="close" to make it work -->
<div class="close"></div>
</div>
I want clear model just like semantic-ui way. Yes, i want to remove <div
class="close"></div> (the style of .close is float: none; clear: both;)
How to do it to be as clear as semantic-ui way?