1
2
3
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
Fixed Table Layout Grid Mixed Rows
HTML
<div class="dt dt--fixed">
<div class="dt-row">
<div class="dtc tc pv4 bg-black-10">
1
</div>
<div class="dtc tc pv4 bg-black-05">
2
</div>
<div class="dtc tc pv4 bg-black-10">
3
</div>
</div>
<div class="dt-row">
<div class="dtc tc pv4 white bg-black">
1
</div>
<div class="dtc tc pv4 white bg-black-70">
2
</div>
<div class="dtc tc pv4 white bg-black">
3
</div>
<div class="dtc tc pv4 white bg-black-70">
4
</div>
<div class="dtc tc pv4 white bg-black">
5
</div>
<div class="dtc tc pv4 white bg-black-70">
6
</div>
<div class="dtc tc pv4 white bg-black">
7
</div>
<div class="dtc tc pv4 white bg-black-70">
8
</div>
<div class="dtc tc pv4 white bg-black">
9
</div>
</div>
<div class="dt-row">
<div class="dtc tc pv4 bg-black-10">
1
</div>
<div class="dtc tc pv4 bg-black-05">
2
</div>
<div class="dtc tc pv4 bg-black-10">
3
</div>
<div class="dtc tc pv4 bg-black-10">
4
</div>
<div class="dtc tc pv4 bg-black-05">
5
</div>
<div class="dtc tc pv4 bg-black-10">
6
</div>
</div>
</div>
css
.dt {
display: table;
}
.dtc {
display: table-cell;
}
.dt-row {
display: table-row;
}
.dt--fixed {
table-layout: fixed;
width: 100%;
}
.white {
color: #fff;
}
.bg-black-70 {
background-color: rgba(0, 0, 0, .7);
}
.bg-black-10 {
background-color: rgba(0, 0, 0, .1);
}
.bg-black-05 {
background-color: rgba(0, 0, 0, .05);
}
.bg-black {
background-color: #000;
}
.pv4 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.tc {
text-align: center;
}
Css stats for this component
- Gzipped Size
- 217B
- Selectors
- 11
- Declarations
- 13
Modules referenced
Install via npm Only installs the needed tachyons-modules for this component
npm i --save tachyons-display tachyons-skins tachyons-spacing tachyons-text-align