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
Content c
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.