# Flex Grid Preview

## Line Wraps

    <div class="grid gutter grid-flex"></div>

# Box 1

Text text text Text text.

Text text text Text text.

# Box 2

Text text text Text text.

Text text text Text text.

Text text text Text text.

# Box 3

Text text text Text text.

Text text text Text text.

# Box 4

- Benefit 1
- Benefit 2

# Box 5

- Benefit 1
- Benefit 2
- Benefit 3
- Benefit 4

# Box 6

- Benefit 1
- Benefit 2
- Benefit 3

#### Box 7

Text text text Text text.

#### Box 8

Text text text Text text.

Text text text Text text.

Text text text Text text.

#### Box 9

Text text text Text text.

## Vertical Alignment

    <div class="grid grid-flex gutter grid-align-"></div>

### Produkt 1

Teuerstes Produkt. Kriegt die prominenteste Box und wird in der Mitte angezeigt.

Mehr Text.

- Ein
- Paar
- Vorteile

Kaufen

### Produkt 2

Kostet nicht ganz so viel und soll deswegen weniger auffallen.

Kaufen

### Produkt 3

Billiges Produkt, wird ganz nach hinten geschoben.

Kaufen

## Order

1
2
3
4
5

## Fixed-width Grid Items

200px
~ 2/3
~ 1/4
Width based on content
~ 1/4

## No Redundant Bottom Whitespace

    <div class="grid gutter grid-flex"></div>

Previous Content
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Following Content