Your device is currently using:

Sizes

100%
50%
50%
33.333%
33.333%
33.333%
25%
25%
25%
25%
20%
20%
20%
20%
20%
12.5%
12.5%
12.5%
12.5%
12.5%
12.5%
12.5%
12.5%

Example grid combinations

Quarter / Three Quarters

25%
75%

Applied at extra small (240px) devices and above.

Half / Quarter / Two Eighths

50%
25%
12.5%
12.5%

Applied at small (400px) devices and above.

Two Thirds / Third

66.666%
33.333%

Applied at medium (600px) devices and above.

Half / Three Sixths

50%
33.333%
33.333%
33.333%

Applied at large (900px) devices and above.

Nested Grids

50%
33.333%
50%
50%
33.333%
33.333%
33.333%

Equal Height

Applied with the class: gel-layout--equal. This option only works for browsers which support flexbox

Horizontal Alignment

Left

Centre

Applied with the class: gel-layout--center

Right

Applied with the class: gel-layout--right

Top Alignment

Middle Alignment

Applied with the class: gel-layout--middle

Bottom Alignment

Applied with the class: gel-layout--bottom

Reversed

1

2

3

4

Applied with the class: gel-layout--rev

Independent Alignment

Align Top

Align Center

Align Bottom

Applied with classes on individual layout items: gel-layout__item--top, gel-layout__item--center, gel-layout__item--bottom

Flush

1

2

3

4

Applied with the class: gel-layout--flush

Fit

1

2

3

4

1

2

Applied with the class: gel-layout--fit. This option only works for browsers which support flexbox