TV Spot Test

For proper grid alignment, grid-rows must contain grid-units as follows: .grid-row > .grid-unit.sizeXofY.

Grid Classes


.grid-row
Contains the columns and have a min and max width. Nested rows have the widths removed and negative left and right margin added for grid alignment.
.grid-row-collapse
Extension for the grid-row class for nested rows. It removes the left and right negative margin when a background color is needed on the nested row so it aligns properly with the grid.
.grid-unit
Base class for making columns. Contains float and padding (gutter). By default columns are set to stack when the screen width is below 768 pixels.
.sizeXofY
Extension for the grid-unit class and can be used independently if desired. Widths can be thirds, quarters, fifths, sixths, halves or full. Total columns in a row must equal 1, for example ⅓ plus ⅔ equals 1.
.colborder
Extension for the grid-unit class and can be used independently if desired. This is used for added a left border.

Example Page Layout With Grid Nesting


  1. <div class="grid-row">
  2. <div class="grid-unit size2of3">
  3. <div class="grid-row grid-row-collapse">
  4. <div class="grid-unit size1of4">…</div>
  5. <div class="grid-unit size1of4">…</div>
  6. <div class="grid-unit size1of4">…</div>
  7. <div class="grid-unit size1of4">…</div>
  8. </div>
  9. </div>
  10. <div class="grid-unit size1of3">…</div>
  11. </div>

Page Title

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.

Some Title

Some Title

Some Title

Some Title

Sidebar

  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
  • Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
  • Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
  • Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

Column Borders


<div class="grid-unit size1of3 colborder">…</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.


Grid Examples


Sixths

  1. <div class="grid-row">
  2. <div class="grid-unit size1of6">…</div>
  3. <div class="grid-unit size5of6">…</div>
  4. </div>

1/6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan.

1/6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan.

1/6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan.

1/6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan.

1/6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan.

1/6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan.

5/6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

1/6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan.

Fifths

  1. <div class="grid-row">
  2. <div class="grid-unit size2of5">…</div>
  3. <div class="grid-unit size3of5">…</div>
  4. </div>

1/5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

1/5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

1/5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

1/5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

1/5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

1/5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

3/5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla pharetra nisl nec tortor convallis rutrum vestibulum felis consectetur. Nullam mi nisi, tincidunt id ornare ut, auctor non mi. Cras sagittis bibendum venenatis. In hac habitasse platea dictumst. Nulla in velit orci, quis venenatis lacus. Etiam mauris sem, tincidunt ac bibendum eget, tincidunt a odio. Vivamus scelerisque sagittis lacus condimentum posuere. Donec viverra lectus nec erat feugiat rutrum.

1/5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

2/5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

3/5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

4/5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla pharetra nisl nec tortor convallis rutrum vestibulum felis consectetur. Nullam mi nisi, tincidunt id ornare ut, auctor non mi. Cras sagittis bibendum venenatis. In hac habitasse platea dictumst. Nulla in velit orci, quis venenatis lacus. Etiam mauris sem, tincidunt ac bibendum eget, tincidunt a odio. Vivamus scelerisque sagittis lacus condimentum posuere. Donec viverra lectus nec erat feugiat rutrum.

1/5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

Fourths

  1. <div class="grid-row">
  2. <div class="grid-unit size3of4">…</div>
  3. <div class="grid-unit size1of4">…</div>
  4. </div>

1/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

1/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

1/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

1/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

1/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

2/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla pharetra nisl nec tortor convallis rutrum vestibulum felis consectetur. Nullam mi nisi, tincidunt id ornare ut, auctor non mi. Cras sagittis bibendum venenatis. In hac habitasse platea dictumst. Nulla in velit orci, quis venenatis lacus.

1/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

3/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla pharetra nisl nec tortor convallis rutrum vestibulum felis consectetur. Nullam mi nisi, tincidunt id ornare ut, auctor non mi. Cras sagittis bibendum venenatis. In hac habitasse platea dictumst. Nulla in velit orci, quis venenatis lacus. Etiam mauris sem, tincidunt ac bibendum eget, tincidunt a odio. Vivamus scelerisque sagittis lacus condimentum posuere. Donec viverra lectus nec erat feugiat rutrum.

1/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

Thirds

  1. <div class="grid-row">
  2. <div class="grid-unit size1of3">…</div>
  3. <div class="grid-unit size2of3">…</div>
  4. </div>

1/3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

1/3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

1/3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

1/3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

2/3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla pharetra nisl nec tortor convallis rutrum vestibulum felis consectetur. Nullam mi nisi, tincidunt id ornare ut, auctor non mi. Cras sagittis bibendum venenatis. In hac habitasse platea dictumst. Nulla in velit orci, quis venenatis lacus. Etiam mauris sem, tincidunt ac bibendum eget, tincidunt a odio.

Halves

  1. <div class="grid-row">
  2. <div class="grid-unit size1of2">…</div>
  3. <div class="grid-unit size1of2">…</div>
  4. </div>

1/2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

1/2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

Full

  1. <div class="grid-row">
  2. <div class="grid-unit size1of1">…</div>
  3. </div>

1/1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla pharetra nisl nec tortor convallis rutrum vestibulum felis consectetur. Nullam mi nisi, tincidunt id ornare ut, auctor non mi. Cras sagittis bibendum venenatis. In hac habitasse platea dictumst. Nulla in velit orci, quis venenatis lacus. Etiam mauris sem, tincidunt ac bibendum eget, tincidunt a odio. Vivamus scelerisque sagittis lacus condimentum posuere. Donec viverra lectus nec erat feugiat rutrum.