Display

Class	CSS Value
`d-b`	block
`d-ib`	inline-block
`d-i`	inline
`d-f`	flex
`d-if`	inline-flex

Flexbox

<div class="d-f">
  <div style="width: 100px">100px</div>
  <div class="flex">flex</div>
</div>
<div class="d-f">
  <div class="flex">flex</div>
  <div class="flex">flex</div>
</div>
<div class="d-f">
  <div class="flex">flex</div>
  <div class="flex-2">flex-2</div>
</div>
<div class="d-f">
  <div class="flex b">flex</div>
  <div class="flex-3">flex-3</div>
</div>

100px

flex

flex-2

flex

flex-3

*Additional styles applied for demonstration purposes.

Grid System

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col span-4">col span-4</div>
  <div class="col span-8">col span-8</div>
</div>

col

col span-4

col span-8

*Additional styles applied for demonstration purposes.

Responsive Grid

This responsive grid is based on the size of the viewport, not the size of the container. The example below is running in an iframe for easy demonstration, but if you need the layout to be responsive to the contianer size see the Alternative Responsive Grid below.

<div class="row">
  <div class="col d-span-3 t-span-6 m-span-12">
    col d-span-3 t-span-6 m-span-12
  </div>
  <div class="col d-span-3 t-span-6 m-span-12">
    col d-span-3 t-span-6 m-span-12
  </div>
  <div class="col d-span-3 t-span-6 m-span-12">
    col d-span-3 t-span-6 m-span-12
  </div>
  <div class="col d-span-3 t-span-6 m-span-12">
    col d-span-3 t-span-6 m-span-12
  </div>
</div>

*Additional styles applied for demonstration purposes.

Alternative Responsive Grid

<div class="row">
  <div class="col" style="min-width: 150px">
    col, min-width: 150px
  </div>
  <div class="col" style="min-width: 200px">
    col, min-width: 200px
  </div>
  <div class="col" style="min-width: 300px">
    col, min-width: 300px
  </div>
</div>

col, min-width: 150px

col, min-width: 200px

col, min-width: 300px

*Additional styles applied for demonstration purposes.