Fix documentation on grids

Author: brandonferrua

ui/utilities/grid/index.docs.jsx

@@ -33,7 +33,7 @@ export default (
 <h2 className={pf('site-text-heading--label')}>Grid Items (Regions/Colums)</h2>
 <p>When you add the class <CodeClass className="col" /> to the grid items, no padding or gutters are added. They are simply divisions of their parent. If you want gutters, add one of the spacing utility classes such as <CodeClass className="p-horizontal--small" />, <CodeClass className="p-horizontal--medium" />, <CodeClass className="p-horizontal--large" />, <CodeClass className="p-around--small" />, <CodeClass className="p-around--medium" /> or <CodeClass className="p-around--large" />. These will add different sized gutters to the left and right side of your column.</p>
 <p>By default, the width of each column within a grid row is determined by the content within. Though this automatic sizing allows you to achieve most desired outcomes, you can add manual <a href="/components/utilities/sizing/">sizing classes</a> to the columns if you need specific column widths.</p>
-<p>Using the manual sizing class helpers, you can specify a column span across the following grids &ndash;2, 3, 4, 5, 6, and 12. The grid supports up to 12 columns.</p>
+<p>Using the manual sizing class helpers, you can specify a column span across the following grids &ndash;2, 3, 4, 5, 6, 7, 8 and 12. The grid supports up to 12 columns.</p>
 
 <h2 className={pf('site-text-heading--label')}>Visual Glossary of Terminology</h2>
 <img className={pf('image')} src="/assets/images/grid/grid-flex-diagram.svg" alt="" />