500 #permalink Grid

Positioniert Elemente gleichmäßig & responsive nebeneinander.

Source: src/utilities/_grid.scss, line 1

500.1 #permalink Grid - zweispaltig

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: src/utilities/_grid.scss, line 11

500.2 #permalink Grid - dreispaltig

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: src/utilities/_grid.scss, line 25