Grid

<h1 class="">Grid</h1>

<p class="intro">Our grid system uses fractions at breakpoints.<br>
    The basic structure consists of a <strong>.grid</strong> containing one or more <strong>.col</strong>s. </p>

<p>Here's a simple example showing a grid containing 2 columns:</p>
<pre>
&lt;div class=&quot;grid&quot;&gt;
  &lt;div class=&quot;col-1/2@mobile&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;col-1/2@mobile&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>

<h2>Classname structure</h2>
<p>each class is made up of two parts. The fractional width of the column and the breakpoint at which it should be applied.</p>
<p>width: <strong>col-1/2</strong> Brealpoint: <strong>@mobile</strong></p>

<h2>Column widths</h2>
<p>Always use the simplest form of any fraction. Eg. 2/4 can be better expressed as 1/2.<br>
    The following fractions up to 13ths are available within the system:</p>
<p>
    1/2<br>
    1/3, &emsp; 2/3<br>
    1/4, &emsp; (2/4 can be simplified to 1/2), &emsp; 3/4<br>
    1/5, &emsp; 2/5, &emsp; 3/5, &emsp; 4/5<br>
    1/6, &emsp; 5/6<br>
    1/7, &emsp; 2/7, &emsp; 3/7, &emsp; 4/7, &emsp; 5/7, &emsp; 6/7<br>
    1/8, &emsp; 3/8, &emsp; 5/8, &emsp; 7/8<br>
    1/9, &emsp; 2/9, &emsp; 4/9, &emsp; 5/9, &emsp; 7/9<br>
    1/10, &emsp; 3/10, &emsp; 7/10<br>
    1/11, &emsp; 2/11, &emsp; 3/11, &emsp; 4/11, &emsp; 5/11, &emsp; 6/11, &emsp; 7/11, &emsp; 8/11, &emsp; 9/11, &emsp; 10/11<br>
    1/12, &emsp; 5/12, &emsp; 7/12, &emsp; 11/12<br>
    1/13, &emsp; 2/13, &emsp; 3/13, &emsp; 4/13, &emsp; 5/13, &emsp; 6/13, &emsp; 7/13, &emsp; 8/13, &emsp; 9/13, &emsp; 10/13, &emsp; 11/13, &emsp; 12/13
</p>

<h2>Breakpoints</h2>
<p>All columns start at 100% width until a breakpoint occurs and tells them to do something different. We've selected 6 breakpoints which are used for the grid system and other elements within the design system.</p>
<p>These nominally use device names but these are only for readability and should not be taken as a guarantee that a certain size will directly translate to that sort of device. These sizes are measured in REMs, a scale based on the root font size of the site. Changing the base font size will affect all breakpoints.</p>
<ul>
    <li><strong>mobile</strong>: 20rem</li>
    <li><strong>mobilewide</strong>: 35rem</li>
    <li><strong>tablet</strong>: 47.5rem</li>
    <li><strong>tabletwide</strong>: 55rem</li>
    <li><strong>smalldesktop</strong>: 70rem</li>
    <li><strong>desktop</strong>: 85rem</li>
</ul>

<h2>Chaining classes</h2>
<p>To have columns resize based on the viewable screen area we can use more than one column class at a time:</p>
<pre>
&lt;div class=&quot;grid&quot;&gt;
  &lt;div class=&quot;col-1/2@mobile col-1/4@desktop&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;col-1/2@mobile col-3/4@desktop&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
<p>This example above will show two 1/2 width columns at mobile but on a desktop the first will be 1/4 and the second will be 3/4. </p>

<div class="grid grid-demo">
    <div class="col-1/2@mobile col-1/4@desktop">
        <p>1/4</p>
    </div>
    <div class="col-1/2@mobile col-3/4@desktop">
        <p>3/4</p>
    </div>
</div>

<h2>Nesting grids</h2>
<p>Grids can be safely nested within each other to create virtually any layout.</p>
<p>It's worth noting that each grid must sit within a column, directly nesting one .grid inside another will create layout issues.<br>
    Also all fractions are relative to the direct parent grid, not the original ancestral grid wrapper.</p>
<pre>
&lt;div class=&quot;grid&quot;&gt;
  &lt;div class=&quot;col-1/2@mobile col-1/4@desktop&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;col-1/2@mobile col-3/4@desktop&quot;&gt;
    &lt;div class=&quot;grid&quot;&gt;
      &lt;div class=&quot;col-1/3@mobile&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;col-2/3@mobile&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>

<div class="grid grid-demo">
    <div class="col-1/2@mobile col-1/4@desktop">
        <p>1/4</p>
    </div>
    <div class="col-1/2@mobile col-3/4@desktop">
        <p>3/4</p>
        <div class="grid">
            <div class="col-1/3@mobile">
                <p>1/3</p>
            </div>
            <div class="col-2/3@mobile">
                <p>2/3</p>
            </div>
        </div>
    </div>
</div>