TransParent Grid [ Demo ]

The TransParent Grid is a flexible, powerful, fully mature, mobile-first, and responsive layout solution. It was brought about by the need for a more flexible grid system that was not bound to a set amount of columns (12 or 16, most commonly). 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 naming convention that allows for an extremely small learning-curve. It has a few built-in extras and is easily modified to suit any 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 Use
- 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

2 of 2

3 Columns

1 of 3

2 of 3

1 of 3

3 of 3

4 Columns

1 of 4

2 of 4

1 of 4

3 of 4

1 of 4

4 of 4

5 Columns

1 of 5

2 of 5

1 of 5

3 of 5

1 of 5

4 of 5

1 of 5

5 of 5

6 Columns

1 of 6

2 of 6

1 of 6

3 of 6

1 of 6

4 of 6

1 of 6

5 of 6

1 of 6

6 of 6

7 Columns

1 of 7

2 of 7

1 of 7

3 of 7

1 of 7

4 of 7

1 of 7

5 of 7

1 of 7

6 of 7

1 of 7

7 of 7

8 Columns

1 of 8

2 of 8

1 of 8

3 of 8

1 of 8

4 of 8

1 of 8

5 of 8

1 of 8

6 of 8

1 of 8

7 of 8

1 of 8

8 of 8

9 Columns

1 of 9

2 of 9

1 of 9

3 of 9

1 of 9

4 of 9

1 of 9

5 of 9

1 of 9

6 of 9

1 of 9

7 of 9

1 of 9

8 of 9

1 of 9

9 of 9

10 Columns

1 of 10

2 of 10

1 of 10

3 of 10

1 of 10

4 of 10

1 of 10

5 of 10

1 of 10

6 of 10

1 of 10

7 of 10

1 of 10

8 of 10

1 of 10

9 of 10

1 of 10

10 of 10

11 Columns

1 of 11

2 of 11

1 of 11

3 of 11

1 of 11

4 of 11

1 of 11

5 of 11

1 of 11

6 of 11

1 of 11

7 of 11

1 of 11

8 of 11

1 of 11

9 of 11

1 of 11

10 of 11

1 of 11

11 of 11

12 Columns

1 of 12

2 of 12

1 of 12

3 of 12

1 of 12

4 of 12

1 of 12

5 of 12

1 of 12

6 of 12

1 of 12

7 of 12

1 of 12

8 of 12

1 of 12

9 of 12

1 of 12

10 of 12

1 of 12

11 of 12

1 of 12

12 of 12

13 Columns

1 of 13

2 of 13

1 of 13

3 of 13

1 of 13

4 of 13

1 of 13

5 of 13

1 of 13

6 of 13

1 of 13

7 of 13

1 of 13

8 of 13

1 of 13

9 of 13

1 of 13

10 of 13

1 of 13

11 of 13

1 of 13

12 of 13

1 of 13

13 of 13

14 Columns

1 of 14

2 of 14

1 of 14

3 of 14

1 of 14

4 of 14

1 of 14

5 of 14

1 of 14

6 of 14

1 of 14

7 of 14

1 of 14

8 of 14

1 of 14

9 of 14

1 of 14

10 of 14

1 of 14

11 of 14

1 of 14

12 of 14

1 of 14

13 of 14

1 of 14

14 of 14

15 Columns

1 of 15

2 of 15

1 of 15

3 of 15

1 of 15

4 of 15

1 of 15

5 of 15

1 of 15

6 of 15

1 of 15

7 of 15

1 of 15

8 of 15

1 of 15

9 of 15

1 of 15

10 of 15

1 of 15

11 of 15

1 of 15

12 of 15

1 of 15

13 of 15

1 of 15

14 of 15

1 of 15

15 of 15

16 Columns

1 of 16

2 of 16

1 of 16

3 of 16

1 of 16

4 of 16

1 of 16

5 of 16

1 of 16

6 of 16

1 of 16

7 of 16

1 of 16

8 of 16

1 of 16

9 of 16

1 of 16

10 of 16

1 of 16

11 of 16

1 of 16

12 of 16

1 of 16

13 of 16

1 of 16

14 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 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

1 of 2 offset by 1

1 of 3 offset by 2

1 of 4 offset by 3

1 of 5 offset by 4

1 of 6 offset by 5

2 of 6 offset by 1
1 of 6 offset by 2

Form Grid

Basic Form Inputs

Text input[type="text"]
Email input[type="email"]
Tel input[type="tel"]
URL input[type="url"]
Password input[type="password"]
- Select select[options]
- Select select[optgroup]
- Checkboxes [input]
  - Check One,
  - Two,
  - Mic Check.
- Radio Buttons [input]
  - Radio
  - Video
  - Internet
Textarea

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

1 of 1
1 of 1

1 of 2
1 of 2
1 of 2
1 of 2

1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
1 of 3

1 of 4
1 of 4
1 of 4
1 of 4
1 of 4
1 of 4
1 of 4
1 of 4

1 of 5
1 of 5
1 of 5
1 of 5
1 of 5
1 of 5
1 of 5
1 of 5
1 of 5
1 of 5

1 of 6
1 of 6
1 of 6
1 of 6
1 of 6
1 of 6
1 of 6
1 of 6
1 of 6
1 of 6
1 of 6
1 of 6

1 of 7
1 of 7
1 of 7
1 of 7
1 of 7
1 of 7
1 of 7
1 of 7
1 of 7
1 of 7
1 of 7
1 of 7
1 of 7
1 of 7

1 of 8
1 of 8
1 of 8
1 of 8
1 of 8
1 of 8
1 of 8
1 of 8
1 of 8
1 of 8
1 of 8
1 of 8
1 of 8
1 of 8
1 of 8
1 of 8

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
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

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
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

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
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

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
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

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
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

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
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

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
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

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
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

Viewport Display Utilities

Mobile (small viewport)

Mobile (small viewport)
Tablet (medium viewport)

Tablet (medium viewport)
Desktop (large viewport)

Desktop (large viewport)

Fast

Flexible

Powerful

Proven

Responsive

Compatible

TL;DR [ Getting Started ]

Full Grid

1 Column

2 Columns

3 Columns

4 Columns

5 Columns

6 Columns

7 Columns

8 Columns

9 Columns

10 Columns

11 Columns

12 Columns

13 Columns

14 Columns

15 Columns

16 Columns

Nested Grids

Simple Nesting [ The Fibonacci Sequence ]

Complicated Nesting [ The AG Test ]

1 of 5

Vertical Rhythm

1 of 2

1 of 2

1 of 3

1 of 2

1 of 2

1 of 1

1 of 5

Offsets

Form Grid

Table Grid

Equal-Width Grid

Column Padding

Minimal Padding

Normal Padding

Medium Padding

Large Padding

Viewport Display Utilities