Grid

<p>Rehau Web Design Guide uses Zurb Foundation XY Grid (https://get.foundation/sites/docs/xy-grid.html)</p>

<h3>Basics</h3>
<p>The structure of XY grid uses <code class="code-inline-preview">.grid-x</code>, <code class="code-inline-preview">.grid-y</code>, and <code class="code-inline-preview">.cell</code> as its base. Without
    defining a gutter type the cells will simply split up the space without any gutters.</p>
<p>Cell sizes is based on 12 point size where 12 - means 100% width of grid container and 1 - 1/12 % width of grid
    container
    and so on...
</p>

<div class="container">
    <div class="grid-x">
        <div class="cell -bg-secondary -cs-light">
            Full width cell
        </div>
    </div>
</div>
<pre class="code-preview">&lt;div class&#x3D;&quot;container&quot;&gt;
  &lt;div class&#x3D;&quot;grid-x&quot;&gt;
    &lt;div class&#x3D;&quot;cell&quot;&gt;
      ...
    &lt;/div&gt;
    ...
  &lt;/div&gt;
&lt;/div&gt;</pre>

<p>To define cell size based on device width use breakpoint name and size <code class="code-inline-preview">{breakpoint}-{size}</code></p>
<p>Where <code class="code-inline-preview">{size}: 1-12</code> and <code class="code-inline-preview">{breakpoint}</code>:
</p>
<ul>
    <li><code class="code-inline-preview">small</code></li>
    <li><code class="code-inline-preview">pre-medium</code></li>
    <li><code class="code-inline-preview">medium</code></li>
    <li><code class="code-inline-preview">pre-large</code></li>
    <li><code class="code-inline-preview">large</code></li>
</ul>

<div class="container">
    <div class="grid-x">
        <div class="cell small-10 pre-medium-8 medium-6 pre-large-4 large-2 -bg-secondary -cs-light">
            small-10 pre-medium-8 medium-6 pre-large-4 large-2
        </div>
        <div class="cell small-2 pre-medium-4 medium-6 pre-large-8 large-10 -bg-primary -cs-light">
            small-2 pre-medium-4 medium-6 pre-large-8 large-10
        </div>
    </div>
</div>
<pre class="code-preview">&lt;div class&#x3D;&quot;container&quot;&gt;
  &lt;div class&#x3D;&quot;grid-x&quot;&gt;
    &lt;div class&#x3D;&quot;cell small-10 pre-medium-8 medium-6 pre-large-4 large-2&quot;&gt;
      ...
    &lt;/div&gt;
    &lt;div class&#x3D;&quot;cell small-2 pre-medium-4 medium-6 pre-large-8 large-10&quot;&gt;
      ...
    &lt;/div&gt;
    ...
  &lt;/div&gt;
&lt;/div&gt;</pre>

<h3>Gutters</h3>
<p>The defining feature of the XY grid is the ability to use margin AND padding grids in harmony. To define a grid type,
    simply set <code class="code-inline-preview">.grid-margin-x/.grid-margin-y</code> or <code class="code-inline-preview">.grid-padding-x/.grid-padding-y</code> on the grid.</p>
<p>Gutter sizes are defined in <code class="code-inline-preview">src\base\settings\_grid.scss</code> file. Use class
    <code class="code-inline-preview">-halve</code> to reduce gutter by half </p>
<div class="container">
    <div class="grid-x grid-margin-x grid-margin-y">
        <div class="cell small-6 -bg-secondary -cs-light">small-6</div>
        <div class="cell small-6 -bg-secondary -cs-light">small-6</div>
        <div class="cell small-6 -bg-secondary -cs-light">small-6</div>
        <div class="cell small-6 -bg-secondary -cs-light">small-6</div>
    </div>
</div>
<pre class="code-preview">&lt;div class&#x3D;&quot;container&quot;&gt;
  &lt;div class&#x3D;&quot;grid-x grid-margin-x grid-margin-y&quot;&gt;
    &lt;div class&#x3D;&quot;cell small-6&quot;&gt;...&lt;/div&gt;
    &lt;div class&#x3D;&quot;cell small-6&quot;&gt;...&lt;/div&gt;
    ...
  &lt;/div&gt;
&lt;/div&gt;</pre>

<p>Halve gutter example:</p>
<div class="container">
    <div class="grid-x grid-margin-x grid-margin-y -halve">
        <div class="cell small-6 -bg-secondary -cs-light">small-6</div>
        <div class="cell small-6 -bg-secondary -cs-light">small-6</div>
        <div class="cell small-6 -bg-secondary -cs-light">small-6</div>
        <div class="cell small-6 -bg-secondary -cs-light">small-6</div>
    </div>
</div>
<pre class="code-preview">&lt;div class&#x3D;&quot;container&quot;&gt;
  &lt;div class&#x3D;&quot;grid-x grid-margin-x grid-margin-y -halve&quot;&gt;
    &lt;div class&#x3D;&quot;cell small-6&quot;&gt;...&lt;/div&gt;
    &lt;div class&#x3D;&quot;cell small-6&quot;&gt;...&lt;/div&gt;
    ...
  &lt;/div&gt;
&lt;/div&gt;</pre>

<h3>Auto sizing</h3>
<p>If the class <code class="code-inline-preview">.auto</code> or <code class="code-inline-preview">.{size}-auto</code>
    is added to the cell, it will take up the remaining space.</p>
<div class="container">
    <div class="grid-x grid-margin-x grid-margin-y">
        <div class="cell medium-4 -bg-secondary -cs-light">medium-4</div>
        <div class="cell medium-auto -bg-secondary -cs-light">medium-auto. Takes what is left from medium device width</div>
    </div>
</div>
<pre class="code-preview">&lt;div class&#x3D;&quot;container&quot;&gt;
  &lt;div class&#x3D;&quot;grid-x grid-margin-x grid-margin-y&quot;&gt;
    &lt;div class&#x3D;&quot;cell medium-4&quot;&gt;...&lt;/div&gt;
    &lt;div class&#x3D;&quot;cell medium-auto&quot;&gt;...&lt;/div&gt;
    ...
  &lt;/div&gt;
&lt;/div&gt;</pre>

<br>

<p>A cell can also be made to shrink, by adding the <code class="code-inline-preview">.shrink</code> or <code class="code-inline-preview">.{size}-shrink</code> class. This means it will only take up the space its contents
    need.</p>
<div class="container">
    <div class="grid-x grid-margin-x grid-margin-y">
        <div class="cell shrink -bg-secondary -cs-light">shrink. Takes space as little as needs for content</div>
        <div class="cell auto -bg-secondary -cs-light">auto. Takes what is left</div>
    </div>
</div>
<pre class="code-preview">&lt;div class&#x3D;&quot;container&quot;&gt;
  &lt;div class&#x3D;&quot;grid-x grid-margin-x grid-margin-y&quot;&gt;
    &lt;div class&#x3D;&quot;cell medium-shrink&quot;&gt;...&lt;/div&gt;
    &lt;div class&#x3D;&quot;cell medium-auto&quot;&gt;...&lt;/div&gt;
    ...
  &lt;/div&gt;
&lt;/div&gt;</pre>

<br>

<h3>Ordering</h3>
<p>Cells in grid can be rearranged based on device width using class <code class="code-inline-preview"> {breakpoint}-order-{order number}</code>:</p>
<div class="container">
    <div class="grid-x grid-margin-x grid-margin-y">
        <div class="cell small-6 small-order-1 medium-order-2 -bg-primary -cs-light">small-order-1 medium-order-2</div>
        <div class="cell small-6 small-order-2 medium-order-1 -bg-secondary -cs-light">small-order-2 medium-order-1</div>
    </div>
</div>
<pre class="code-preview">&lt;div class&#x3D;&quot;container&quot;&gt;
  &lt;div class&#x3D;&quot;grid-x grid-margin-x grid-margin-y&quot;&gt;
    &lt;div class&#x3D;&quot;cell small-6 small-order-1 medium-order-2 &quot;&gt;...&lt;/div&gt;
    &lt;div class&#x3D;&quot;cell small-order-2 medium-order-1&quot;&gt;...&lt;/div&gt;
    ...
  &lt;/div&gt;
&lt;/div&gt;</pre>

<br>