The TransParent Grid is highly flexible, extremely powerful, fully mature, mobile-first, completely fluid and responsibly responsive. It was brought about by a need for a more flexible grid system that was not bound to a set amount of columns (12 or 16, in the most common cases). Instead, it has a variable amount of columns per row ranging anywhere from 1 to 16 (more can be easily added, as needed). It also uses a simple and easy-to-remember naming convention that allows for an extremely small learning-curve. It has a few built-in extras and is easily modifiable to suit many various needs.


  • Fast

    Quick to learn, implement, and extend (as needed).

  • Flexible

    Percentage-based and highly responsive for content choreography.

  • Powerful

    Strong-arm your layout to do what you say.
    Or else.

  • Proven

    Field-tested over years on a top-1000-ranked e-commerce site.

  • Responsive

    Mobile-first, with 3 built-in media-query viewport sizes (which are also accessible to javascript).

  • Compatible

    Device-agnostic, works out-of-the-box on most devices and in all modern browsers.


TL;DR [ Getting Started ]

Guidelines and best-practices to effectively utilize the grid:

  • Basic Usage
    • Grid Container, '.container'
      the outermost wrapper — it sets the overall max-width for all display sizes; it best represents the maximum page width,
    • Grid Row, '.row-[sml||med||lrg]-[0-9]'
      where '[sml||med||lrg]' is the viewport size with which to apply said grid size and '[0-9]' is the number of columns a grid row will have,
    • Grid Column, '.col-[sml||med||lrg]-[0-9]'
      where '[sml||med||lrg]' is the viewport size with which to apply said grid size and '[0-9]' is the number of columns a column will represent of a grid row’s column count.
  • Separate the structure from the skin (keep the grid mark-up “single-purpose”)
    • Don't add grid classes to existing mark-up,
    • Don't add any other classes to the grid mark-up, and…
    • Don't stack differing grid classes — a 'row-*' class and a 'col-*' class should never be applied to the same mark-up element. For this reason, unordered lists are the preferred grid mark-up (a <ul> cannot also be a <li>)

Browser support
the TransParent Grid relies on the border-box box-sizing method and is not compatible with IE7 and down. It also relies on media-queries which is not compatible with IE8 either (use respond.js to provide support). Otherwise, it will work with all modern browsers (Chrome, Edge, IE9+, FF, and Safari).

Full Grid

1 Column

1 of 1

2 Columns

1 of 2
1 of 2
2 of 2

3 Columns

1 of 3
1 of 3
1 of 3
2 of 3
1 of 3
3 of 3

4 Columns

1 of 4
1 of 4
1 of 4
1 of 4
2 of 4
1 of 4
1 of 4
3 of 4
1 of 4
4 of 4

5 Columns

1 of 5
1 of 5
1 of 5
1 of 5
1 of 5
2 of 5
1 of 5
1 of 5
1 of 5
3 of 5
1 of 5
1 of 5
4 of 5
1 of 5
5 of 5

6 Columns

1 of 6
1 of 6
1 of 6
1 of 6
1 of 6
1 of 6
2 of 6
1 of 6
1 of 6
1 of 6
1 of 6
3 of 6
1 of 6
1 of 6
1 of 6
4 of 6
1 of 6
1 of 6
5 of 6
1 of 6
6 of 6

7 Columns

1 of 7
1 of 7
1 of 7
1 of 7
1 of 7
1 of 7
1 of 7
2 of 7
1 of 7
1 of 7
1 of 7
1 of 7
1 of 7
3 of 7
1 of 7
1 of 7
1 of 7
1 of 7
4 of 7
1 of 7
1 of 7
1 of 7
5 of 7
1 of 7
1 of 7
6 of 7
1 of 7
7 of 7

8 Columns

1 of 8
1 of 8
1 of 8
1 of 8
1 of 8
1 of 8
1 of 8
1 of 8
2 of 8
1 of 8
1 of 8
1 of 8
1 of 8
1 of 8
1 of 8
3 of 8
1 of 8
1 of 8
1 of 8
1 of 8
1 of 8
4 of 8
1 of 8
1 of 8
1 of 8
1 of 8
5 of 8
1 of 8
1 of 8
1 of 8
6 of 8
1 of 8
1 of 8
7 of 8
1 of 8
8 of 8

9 Columns

1 of 9
1 of 9
1 of 9
1 of 9
1 of 9
1 of 9
1 of 9
1 of 9
1 of 9
2 of 9
1 of 9
1 of 9
1 of 9
1 of 9
1 of 9
1 of 9
1 of 9
3 of 9
1 of 9
1 of 9
1 of 9
1 of 9
1 of 9
1 of 9
4 of 9
1 of 9
1 of 9
1 of 9
1 of 9
1 of 9
5 of 9
1 of 9
1 of 9
1 of 9
1 of 9
6 of 9
1 of 9
1 of 9
1 of 9
7 of 9
1 of 9
1 of 9
8 of 9
1 of 9
9 of 9

10 Columns

1 of 10
1 of 10
1 of 10
1 of 10
1 of 10
1 of 10
1 of 10
1 of 10
1 of 10
1 of 10
2 of 10
1 of 10
1 of 10
1 of 10
1 of 10
1 of 10
1 of 10
1 of 10
1 of 10
3 of 10
1 of 10
1 of 10
1 of 10
1 of 10
1 of 10
1 of 10
1 of 10
4 of 10
1 of 10
1 of 10
1 of 10
1 of 10
1 of 10
1 of 10
5 of 10
1 of 10
1 of 10
1 of 10
1 of 10
1 of 10
6 of 10
1 of 10
1 of 10
1 of 10
1 of 10
7 of 10
1 of 10
1 of 10
1 of 10
8 of 10
1 of 10
1 of 10
9 of 10
1 of 10
10 of 10

11 Columns

1 of 11
1 of 11
1 of 11
1 of 11
1 of 11
1 of 11
1 of 11
1 of 11
1 of 11
1 of 11
1 of 11
2 of 11
1 of 11
1 of 11
1 of 11
1 of 11
1 of 11
1 of 11
1 of 11
1 of 11
1 of 11
3 of 11
1 of 11
1 of 11
1 of 11
1 of 11
1 of 11
1 of 11
1 of 11
1 of 11
4 of 11
1 of 11
1 of 11
1 of 11
1 of 11
1 of 11
1 of 11
1 of 11
5 of 11
1 of 11
1 of 11
1 of 11
1 of 11
1 of 11
1 of 11
6 of 11
1 of 11
1 of 11
1 of 11
1 of 11
1 of 11
7 of 11
1 of 11
1 of 11
1 of 11
1 of 11
8 of 11
1 of 11
1 of 11
1 of 11
9 of 11
1 of 11
1 of 11
10 of 11
1 of 11
11 of 11

12 Columns

1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
2 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
3 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
4 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
5 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
6 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
7 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
8 of 12
1 of 12
1 of 12
1 of 12
1 of 12
9 of 12
1 of 12
1 of 12
1 of 12
10 of 12
1 of 12
1 of 12
11 of 12
1 of 12
12 of 12

13 Columns

1 of 13
1 of 13
1 of 13
1 of 13
1 of 13
1 of 13
1 of 13
1 of 13
1 of 13
1 of 13
1 of 13
1 of 13
1 of 13
2 of 13
1 of 13
1 of 13
1 of 13
1 of 13
1 of 13
1 of 13
1 of 13
1 of 13
1 of 13
1 of 13
1 of 13
3 of 13
1 of 13
1 of 13
1 of 13
1 of 13
1 of 13
1 of 13
1 of 13
1 of 13
1 of 13
1 of 13
4 of 13
1 of 13
1 of 13
1 of 13
1 of 13
1 of 13
1 of 13
1 of 13
1 of 13
1 of 13
5 of 13
1 of 13
1 of 13
1 of 13
1 of 13
1 of 13
1 of 13
1 of 13
1 of 13
6 of 13
1 of 13
1 of 13
1 of 13
1 of 13
1 of 13
1 of 13
1 of 13
7 of 13
1 of 13
1 of 13
1 of 13
1 of 13
1 of 13
1 of 13
8 of 13
1 of 13
1 of 13
1 of 13
1 of 13
1 of 13
9 of 13
1 of 13
1 of 13
1 of 13
1 of 13
10 of 13
1 of 13
1 of 13
1 of 13
11 of 13
1 of 13
1 of 13
12 of 13
1 of 13
13 of 13

14 Columns

1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
2 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
3 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
4 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
5 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
6 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
7 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
8 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
9 of 14
1 of 14
1 of 14
1 of 14
1 of 14
1 of 14
10 of 14
1 of 14
1 of 14
1 of 14
1 of 14
11 of 14
1 of 14
1 of 14
1 of 14
12 of 14
1 of 14
1 of 14
13 of 14
1 of 14
14 of 14

15 Columns

1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
2 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
3 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
4 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
5 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
6 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
7 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
8 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
9 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
10 of 15
1 of 15
1 of 15
1 of 15
1 of 15
1 of 15
11 of 15
1 of 15
1 of 15
1 of 15
1 of 15
12 of 15
1 of 15
1 of 15
1 of 15
13 of 15
1 of 15
1 of 15
14 of 15
1 of 15
15 of 15

16 Columns

1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
2 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
3 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
4 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
5 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
6 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
7 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
8 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
9 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
10 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
11 of 16
1 of 16
1 of 16
1 of 16
1 of 16
1 of 16
12 of 16
1 of 16
1 of 16
1 of 16
1 of 16
13 of 16
1 of 16
1 of 16
1 of 16
14 of 16
1 of 16
1 of 16
15 of 16
1 of 16
16 of 16

Nested Grids

Simple Nesting [ The Fibonacci Sequence ]

The Fibonacci Sequence is a mathematical sequence of numbers where each increment in the sequence is a sum of the previous two numbers before it in the sequence.

  • 5 of 13
    • 3 of 5
    • 2 of 5
      • 1 of 2
      • 1 of 2
  • 8 of 13

Complicated Nesting [ The AG Test ]

Many years ago Arnaud Gueras, an excellent developer, created this litmus test of a great grid system. It should be able to nest any combination of the units and lines, and so it should be able to create the complicated layout below. His test is reminiscent of the golden mean, so it is still used today.1

  • 1 of 5

    Vertical Rhythm

    From our global line-height of `1.5` (unit-less) we can calculate what is called our “magic number.” This will allow us to maintain vertical rhythm in our design by providing us a number with which to base all line heights and bottom margins. This number can be found by multiplying our font size by our line height, as such: `16 × 1.5 = 24`. Given this equation, `24px` is our “magic number.”

    In order to maintain a vertical rhythm in our designs, all line-heights and top/bottom margins/paddings must ideally be divisible by `24`.

    • 1 of 2

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    • 1 of 2

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    • 1 of 3

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

      • 1 of 2

        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      • 1 of 2

        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      • 1 of 1

        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

  • 1 of 5

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Offsets

Form Grid

Basic Form Inputs


Table Grid

Table Header 2 of 9 Table Header 3 of 9 Table Header 4 of 9
Table Footer 1 of 6 Table Footer 2 of 6 Table Footer 3 of 6
Table Cell 3 of 7 Table Cell 2 of 7 Table Cell 2 of 7
Table Cell 2 of 5 Table Cell 2 of 5 Table Cell 1 of 5
Table Cell 3 of 8 Table Cell 2 of 8 Table Cell 3 of 8

Equal-Width Grid

Column Padding

Minimal Padding

Normal Padding

Medium Padding

Large Padding

Viewport Display Utilities