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

Basics

The structure of XY grid uses .grid-x, .grid-y, and .cell as its base. Without defining a gutter type the cells will simply split up the space without any gutters.

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

<div class="container">
  <div class="grid-x">
    <div class="cell">
      ...
    </div>
    ...
  </div>
</div>

To define cell size based on device width use breakpoint name and size {breakpoint}-{size}

Where {size}: 1-12 and {breakpoint}:

• small
• pre-medium
• medium
• pre-large
• large

<div class="container">
  <div class="grid-x">
    <div class="cell 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">
      ...
    </div>
    ...
  </div>
</div>

Gutters

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 .grid-margin-x/.grid-margin-y or .grid-padding-x/.grid-padding-y on the grid.

Gutter sizes are defined in src\base\settings\_grid.scss file. Use class -halve to reduce gutter by half

<div class="container">
  <div class="grid-x grid-margin-x grid-margin-y">
    <div class="cell small-6">...</div>
    <div class="cell small-6">...</div>
    ...
  </div>
</div>

Halve gutter example:

<div class="container">
  <div class="grid-x grid-margin-x grid-margin-y -halve">
    <div class="cell small-6">...</div>
    <div class="cell small-6">...</div>
    ...
  </div>
</div>

Auto sizing

If the class .auto or .{size}-auto is added to the cell, it will take up the remaining space.

<div class="container">
  <div class="grid-x grid-margin-x grid-margin-y">
    <div class="cell medium-4">...</div>
    <div class="cell medium-auto">...</div>
    ...
  </div>
</div>

A cell can also be made to shrink, by adding the .shrink or .{size}-shrink class. This means it will only take up the space its contents need.

<div class="container">
  <div class="grid-x grid-margin-x grid-margin-y">
    <div class="cell medium-shrink">...</div>
    <div class="cell medium-auto">...</div>
    ...
  </div>
</div>

Ordering

Cells in grid can be rearranged based on device width using class {breakpoint}-order-{order number}:

<div class="container">
  <div class="grid-x grid-margin-x grid-margin-y">
    <div class="cell small-6 small-order-1 medium-order-2 ">...</div>
    <div class="cell small-order-2 medium-order-1">...</div>
    ...
  </div>
</div>