Phoenix Reisen Styleguide

500 #permalink Grid

Positioniert Elemente gleichmäßig & responsive nebeneinander.

Source: utilities/_grid.scss, line 1
Example
Spalte 1
Spalte 2
Markup
<div class="row row--2er">
    <div class="gray5 pa2">Spalte 1</div>
    <div class="gray5 pa2">Spalte 2</div>
</div>
Source: utilities/_grid.scss, line 11
Examples
Default styling
Spalte 1
Spalte 2
Spalte 3
.row--3er
Reponsive schrumpfen alle gleich und erstrecken sich dann über ganze Breite
Spalte 1
Spalte 2
Spalte 3
.row--3er-first-stretched
Responsive streckt sich zunächst das 1. Element über volle Breite
Spalte 1
Spalte 2
Spalte 3
.row--3er-last-stretched
Responsive streckt sich zunächst das 3. Element über volle Breite
Spalte 1
Spalte 2
Spalte 3
Markup
<div class="row [modifier class]">
    <div class="gray5 pa2">Spalte 1</div>
    <div class="gray5 pa2">Spalte 2</div>
    <div class="gray5 pa2">Spalte 3</div>
</div>
Source: utilities/_grid.scss, line 25