Thumbprint logo

Components

Grid

Responsive layouts, automatically aligned.

Version:4.0.3 •View source•Changelog•Report issue
Install:yarn add @thumbtack/thumbprint-scss

Deprecated

This package was deprecated on September 11 in favor of classes from Thumbprint Atomic.

Overview

Grid column widths assume a “mobile first” approach. If columns widths need to change based on browser width you can supply additional column widths that apply at breakpoint.

The grid is a complicated component. Be sure you’re implementing it with the required classes as unexpected issues can occur. See below for details.

Common example

<!-- 1 -->
<div class="tp-wrap-snap">
    <!-- 2 -->
    <div class="tp-grid">
        <!-- 3 -->
        <div class="tp-col tp-col--12 tp-col--sm-4"><div class="my-column-content"></div></div>
        <div class="tp-col tp-col--12 tp-col--sm-4"><div class="my-column-content"></div></div>
        <div class="tp-col tp-col--12 tp-col--sm-4"><div class="my-column-content"></div></div>
    </div>
</div>

In the example above:

  1. If using a wrapper, it MUST be an ancestor of tp-grid. Do not add tp-wrap or other classes to tp-grid that could affect the margins.
  2. tp-grid MUST be a direct parent of tp-col classes.
  3. tp-col MUST be present.

Column class options:

  • .tp-col sets required common column styling
  • .tp-col--sm-N applies above the small breakpoint, N is a value between 1 and 12
  • .tp-col--md-N applies above the medium breakpoint, N is a value between 1 and 12
  • .tp-col--lg-N applies above the large breakpoint, N is a value between 1 and 12

By default, a gutter of 16px is present between columns. See options below to widen or remove it.

There is no added spacing above or below grids or columns. If you need top or bottom spacing, add it to the content inside the columns.

Non-responsive

<div class="tp-grid">
    <div class="tp-col tp-col--4"><div class="ba b-red h4"></div></div>
    <div class="tp-col tp-col--4"><div class="ba b-red h4"></div></div>
    <div class="tp-col tp-col--4"><div class="ba b-red h4"></div></div>
</div>

Responsive

A common layout, stacked when browser width is narrow, side-by-side above that.

<div class="tp-grid">
    <div class="tp-col tp-col--12 tp-col--sm-4"><div class="ba b-red h4"></div></div>
    <div class="tp-col tp-col--12 tp-col--sm-4"><div class="ba b-red h4"></div></div>
    <div class="tp-col tp-col--12 tp-col--sm-4"><div class="ba b-red h4"></div></div>
</div>

Mutiple rows and nesting

<div class="tp-grid">
    <div class="tp-col tp-col--9"><div class="ba b-red h4"></div></div>
    <div class="tp-col tp-col--3"><div class="ba b-red h4"></div></div>
    <div class="tp-col tp-col--5"><div class="ba b-red h4"></div></div>
    <div class="tp-col tp-col--7"><div class="ba b-red h4"></div></div>
</div>

Nesting

<div class="tp-grid">
    <div class="tp-col tp-col--4">
        <div class="tp-grid">
            <div class="tp-col tp-col--6"><div class="ba b-red h5"></div></div>
            <div class="tp-col tp-col--6"><div class="ba b-red h5"></div></div>
        </div>
    </div>
    <div class="tp-col tp-col--4"><div class="ba b-red h4"></div></div>
    <div class="tp-col tp-col--4"><div class="ba b-red h4"></div></div>
</div>

Gutter options

Narrow

<div class="tp-grid tp-grid--narrow">
    <div class="tp-col tp-col--4"><div class="ba b-red h4"></div></div>
    <div class="tp-col tp-col--4"><div class="ba b-red h4"></div></div>
    <div class="tp-col tp-col--4"><div class="ba b-red h4"></div></div>
</div>

Wide

<div class="tp-grid tp-grid--wide">
    <div class="tp-col tp-col--4"><div class="ba b-red h4"></div></div>
    <div class="tp-col tp-col--4"><div class="ba b-red h4"></div></div>
    <div class="tp-col tp-col--4"><div class="ba b-red h4"></div></div>
</div>

Flush

<div class="tp-grid tp-grid--flush">
    <div class="tp-col tp-col--4"><div class="ba b-red h4"></div></div>
    <div class="tp-col tp-col--4"><div class="ba b-red h4"></div></div>
    <div class="tp-col tp-col--4"><div class="ba b-red h4"></div></div>
</div>

Alignment

Center

<div class="tp-grid tp-grid--center">
    <div class="tp-col tp-col--5"><div class="ba b-red h4"></div></div>
</div>

End

<div class="tp-grid tp-grid--end">
    <div class="tp-col tp-col--5"><div class="ba b-red h4"></div></div>
</div>

Justify between

<div class="tp-grid tp-grid--between">
    <div class="tp-col tp-col--5"><div class="ba b-red h4"></div></div>
    <div class="tp-col tp-col--5"><div class="ba b-red h4"></div></div>
</div>

Offset

<div class="tp-grid">
    <div class="tp-col tp-col--4"><div class="ba b-red h4"></div></div>
    <div class="tp-col tp-col--4 tp-col--offset-4"><div class="ba b-red h4"></div></div>
</div>

Middle align

<div class="tp-grid tp-grid--middle">
    <div class="tp-col tp-col--6"><div class="ba b-red h5"></div></div>
    <div class="tp-col tp-col--6"><div class="ba b-red h4"></div></div>
</div>

Bottom align

<div class="tp-grid tp-grid--bottom">
    <div class="tp-col tp-col--6"><div class="ba b-red h5"></div></div>
    <div class="tp-col tp-col--6"><div class="ba b-red h4"></div></div>
</div>