Grid / Layout / Docs / TACHYONS

Debugging Debug Grid Box sizing Spacing Floats Clearfix Display Widths Basic Grid Flexbox Max Widths Heights Position

Grids

You can combine display, float, padding, and widths to construct a wide variety of grids. Here is a basic example of some options for constructing a simple grid.

Examples

Fixed Columns

fl w-100 pa2

fl w-90 pa2

fl w-10 pa2

fl w-80 pa2

fl w-20 pa2

fl w-75 pa2

fl w-25 pa2

fl w-70 pa2

fl w-30 pa2

fl w-60 pa2

fl w-40 pa2

fl w-50 pa2

fl w-third pa2

fl w-two-thirds pa2

fl w-25 pa2

fl w-20 pa2

fl w-10 pa2

Two Columns - Collapsing


<div class="mw9 center ph3-ns">
  <div class="cf ph2-ns">
    <div class="fl w-100 w-50-ns pa2">
      <div class="outline bg-white pv4"></div>
    </div>
    <div class="fl w-100 w-50-ns pa2">
      <div class="outline bg-white pv4"></div>
    </div>
  </div>
</div>

Three Columns - Collapse to Single


<div class="mw9 center ph3-ns">
  <div class="cf ph2-ns">
    <div class="fl w-100 w-third-ns pa2">
      <div class="outline bg-white pv4"></div>
    </div>
    <div class="fl w-100 w-third-ns pa2">
      <div class="outline bg-white pv4"></div>
    </div>
    <div class="fl w-100 w-third-ns pa2">
      <div class="outline bg-white pv4"></div>
    </div>
  </div>
</div>

Three Columns - Collapse to Mixed


<div class="mw9 center ph3-ns">
  <div class="cf ph2-ns">
    <div class="fl w-100 w-third-ns pa2">
      <div class="outline bg-white pv4"></div>
    </div>
    <div class="fl w-50 w-third-ns pa2">
      <div class="outline bg-white pv4"></div>
    </div>
    <div class="fl w-50 w-third-ns pa2">
      <div class="outline bg-white pv4"></div>
    </div>
  </div>
</div>

Four Columns - Collapse to single


<div class="mw9 center ph3-ns">
  <div class="cf ph2-ns">
    <div class="fl w-100 w-25-ns pa2">
      <div class="outline bg-white pv4"></div>
    </div>
    <div class="fl w-100 w-25-ns pa2">
      <div class="outline bg-white pv4"></div>
    </div>
    <div class="fl w-100 w-25-ns pa2">
      <div class="outline bg-white pv4"></div>
    </div>
    <div class="fl w-100 w-25-ns pa2">
      <div class="outline bg-white pv4"></div>
    </div>
  </div>
</div>

Four Columns - Collapse to Mixed


<div class="mw9 center ph3-ns">
  <div class="cf ph2-ns">
    <div class="fl w-100 w-25-ns pa2">
      <div class="outline bg-white tc pv4"></div>
    </div>
    <div class="fl w-third w-25-ns pa2">
      <div class="outline bg-white tc pv4"></div>
    </div>
    <div class="fl w-third w-25-ns pa2">
      <div class="outline bg-white tc pv4"></div>
    </div>
    <div class="fl w-third w-25-ns pa2">
      <div class="outline bg-white tc pv4"></div>
    </div>
  </div>
</div>

Debug with a Grid

Background Size

Reference

MDN - Width property

Overview of Tachyons

Table of Styles Table of Properties

Typography

Type Scale Measure Line Height / Leading Tracking Font Weights Font Style Vertical Align Text Align Text Transform Text Decoration White Space Font Families Avenir Next Helvetica Roboto San Francisco System Sans-Serif Athelas Baskerville Garamond Georgia System Serif

Layout

Debugging Debug with a Grid Basic Grid Flexbox Box Sizing Spacing Floats Clearfix Display Widths Max Widths Heights Position

Theming

Skins Skins animations Hovers Background Size Borders Border Radius Box Shadow Opacity

Elements

Images Links Lists Forms Tables