1
2
3
4
5
Five Column
HTML
<div class="cf">
<div class="fl w-20 tc pv5 bg-black-05">
1
</div>
<div class="fl w-20 tc pv5 bg-black-10">
2
</div>
<div class="fl w-20 tc pv5 bg-black-05">
3
</div>
<div class="fl w-20 tc pv5 bg-black-10">
4
</div>
<div class="fl w-20 tc pv5 bg-black-05">
5
</div>
</div>
css
.cf:before, .cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
.fl {
float: left;
_display: inline;
}
.w-20 {
width: 20%;
}
.bg-black-10 {
background-color: rgba(0, 0, 0, .1);
}
.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
- 231B
- Selectors
- 10
- Declarations
- 12
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