1
2
3
4
Four Column
HTML
<div class="cf"> <div class="fl w-25 tc pv5 bg-black-05"> 1 </div> <div class="fl w-25 tc pv5 bg-black-025"> 2 </div> <div class="fl w-25 tc pv5 bg-black-05"> 3 </div> <div class="fl w-25 tc pv5 bg-black-025"> 4 </div> </div>
css
.cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .cf { *zoom: 1; } .fl { float: left; _display: inline; } .w-25 { width: 25%; } .bg-black-05 { background-color: rgba(0, 0, 0, .05); } .pv5 { padding-top: 4rem; padding-bottom: 4rem; } .tc { text-align: center; }
Css stats for this component
- Gzipped Size
- 223B
- Selectors
- 9
- Declarations
- 11
Modules referenced
Install via npm Only installs the needed tachyons-modules for this component
npm i --save tachyons-clears tachyons-floats tachyons-widths tachyons-skins tachyons-spacing tachyons-text-align