Yellowgrid

This is an example using many of the features of Yellowgrid.

Keep in mind that breakpoints and number of columns are completely configurable.

Normal, single breakpoint

palm--full

palm--1_2

palm--1_2

palm--1_3

palm--1_3

palm--1_3

palm--1_4

palm--1_4

palm--1_4

palm--1_4

Multiple breakpoints

palm--full
lap--1_2
desk--3_4

palm--full
lap--1_2
desk--1_4

palm--full
lap--1_2

palm--full
lap--1_2

palm--1_2
lap--1_4

palm--1_2
lap--1_4

palm--1_2
lap--1_4

palm--1_2
lap--1_4

Grid Sets

grid--set--palm--1_4

grid--set--palm--1_4

grid--set--palm--1_4

grid--set--palm--1_4

grid--set--palm--1_3

grid--set--palm--1_3

grid--set--palm--1_3

Big set with autoclearing rows

grid--set--palm--1_2
grid--set--lap--1_3
grid--set--desk--1_4

grid--set--palm--1_2
grid--set--lap--1_3
grid--set--desk--1_4
(empty)
(empty)
(empty)

grid--set--palm--1_2
grid--set--lap--1_3
grid--set--desk--1_4

grid--set--palm--1_2
grid--set--lap--1_3
grid--set--desk--1_4

grid--set--palm--1_2
grid--set--lap--1_3
grid--set--desk--1_4

grid--set--palm--1_2
grid--set--lap--1_3
grid--set--desk--1_4
(empty)
(empty)
(empty)
(empty)
(empty)

grid--set--palm--1_2
grid--set--lap--1_3
grid--set--desk--1_4
(empty)
(empty)
(empty)

grid--set--palm--1_2
grid--set--lap--1_3
grid--set--desk--1_4

grid--set--palm--1_2
grid--set--lap--1_3
grid--set--desk--1_4

grid--set--palm--1_2
grid--set--lap--1_3
grid--set--desk--1_4
(empty)
(empty)
(empty)
(empty)
(empty)
(empty)

grid--set--palm--1_2
grid--set--lap--1_3
grid--set--desk--1_4
(empty)
(empty)
(empty)
(empty)

grid--set--palm--1_2
grid--set--lap--1_3
grid--set--desk--1_4

Nested Grids

palm--1_2 > grid__col palm--1_4

palm--1_2 > grid__col palm--1_4

palm--1_2 > grid__col palm--1_4

palm--1_2 > grid__col palm--1_4

grid__col palm--1_2

grid__col palm--1_2

Reverse order

1.
grid--reverse > .palm--1_3

2.
grid--reverse > .palm--1_3

3.
grid--reverse > .palm--1_3

Centered

palm--1_4
palm--1_4--centered

palm--1_3
palm--1_3--centered

palm--1_2
palm--1_2--centered

palm--2_3
palm--2_3--centered

palm--3_4
palm--3_4--centered

Push

palm--1_4
palm--push--3_4

palm--1_2
palm--push--1_2

palm--2_3
palm--push--1_3

palm--1_2
desk--1_3

palm--1_2
desk--1_3
desk--push--1_3