CSS table/square-ratio helpers
Table-design using CSS
/* table-design in CSS */
.row {
display: table;
table-layout: fixed;
}
.inline-row {
display: inline-table;
table-layout: fixed;
}
.line {
display: table-row;
}
.col {
display: table-cell;
vertical-align: top;
}
.col-noalign {
display: table-cell;
}
alignbottom
Content b
longer
longer
Content c
much
longer
much
longer
.aligntop {
vertical-align: top;
}
.alignbottom {
vertical-align: bottom;
}
.alignmiddle {
vertical-align: middle;
}
These vertical alignment also work for simple texts (alignsub
and alignbaseline
are also available).
Square and ratio helpers
For some components/special cases (responsive iframe
, making a responsive square shape, responsive typography with SVG, etc.), we have to use the “padding-hack” technique, which is basically:
- A container uses padding-hack to get the desired ratio
- And content inside is positionned in absolute and takes all available space.
<div class="ratio-container-square">
<div class="inner-ratio-container p1">
Some content in a square box with ratio-container-square class.
</div>
</div>
Some content in a square box with
ratio-container-square
class.
Some content in a box with
ratio-container-5-1
class.
Some content in a 16/9 ratio box with
ratio-container-16-9
class.
This is a bit hacky, better not using it often.