Grid

Wrapper

Our layout is flexible, and our content and components are wrapped in a range of columns. We use 6 flexible coontainers across memorisely with a 16px outer, and 32px inner gutter. Containers are horizontal on desktop, and vertical across tablet and mobile.

6 sizes

We use 6 flexible container sizes with memorisely. Every component is wrapped within a flexible container.

Size 1

1/1

Size 2

1/2
1/2

Size 3

1/3
1/3
1/3

Size 4

1/4
1/4
1/4
1/4

Size 5

1/5
1/5
1/5
1/5
1/5

Size 6

1/6
1/6
1/6
1/6
1/6
1/6

Fixed gutter

Each column has a 16px margin, creating a 32px gutter between columns.

Edge gutter

16px edge

Inner gutter

32px inner
32px inner
Return to

Layout

Continue to

Spacing