Test Suite for griid

as of v2.5.2

.griid

a
b
c
d

.griid-2

a
b
c

.griid-3

a
b
c
d

.griid-4

a
b
c
d
e

.griid-5

a
b
c
d
e
f

.griid-6

a
b
c
d
e
f
g

.griid .cell-numerator-denominator

1/2
1/3
1/6
1/3
2/3
3/4
1/4
1/5
4/5
3/5
2/5
1/6
5/6

.grid--top on grid

cell content is top-aligned (default)
ai
aii
aiii
b
c

.grid--middle on grid

cell content is middle-aligned
ai
aii
aiii
b
c

.grid--bottom on grid

cell content is bottom-aligned
ai
aii
aiii
b
c

.grid--bottom on wrapper

cell content vertical alignment mixins work when applied to a grid (as in the above examples) or up the tree
ai
aii
aiii
b
c

.bottom on cell inline (grid is top)

ai
aii
aiii
b
c (has class "bottom")

.grid--left on grid

a
b
c (orphan is left-aligned (default))

.grid--center on grid

a
b
c (orphan is center-aligned)

.grid--right on grid

a
b
c (orphan is right-aligned)

.grid--right on wrapper

orphan horizontal alignment mixins work when applied to a grid (as in the above examples) or up the tree
a
b
c (orphan is right-aligned)

.right on cell inline (grid is left)

a
b (has class "right")
c

.grid--resize-row

turn `.griid .cell` into the equivalent of `.griid-1` (note: there is no `griid-1`)
on the grid
cell becomes block
cell becomes block
cell becomes block
cell becomes block
on a wrapper
cell becomes block
cell becomes block
cell becomes block
cell becomes block

.grid--resize-row(3)

turn `.griid .cell` into `.griid-3 .cell`
on the grid
cell in row beccomes cell in griid-3
cell in row beccomes cell in griid-3
cell in row beccomes cell in griid-3
cell in row beccomes cell in griid-3
on a wrapper
cell in row beccomes cell in griid-3
cell in row beccomes cell in griid-3
cell in row beccomes cell in griid-3
cell in row beccomes cell in griid-3

.grid--resize-one-unequal(1,3)

turn 1/3 into (the default) 1/2
on the grid
1/4
1/4
1/4
1/3 (new row) becomes 1/2
1/3 becomes 1/2
1/3 becomes 1/2
on a wrapper
1/4
1/4
1/4
1/3 (new row) becomes 1/2
1/3 becomes 1/2
1/3 becomes 1/2

.grid--resize-one-unequal(1, 4, 2, 3)

2/3 becomes 1/4
on the grid
2/3 becomes 1/4
1/3
on a wrapper
2/3 becomes 1/4
1/3

.griid--resize-unequal

all fractions become 1/2 (the default)
on the grid
1/4 becomes 1/2
3/5 becomes 1/2
on a wrapper
1/4 becomes 1/2
3/5 becomes 1/2

.griid--resize-unequal(1,3)

all fractions become 1/3
on the grid
1/5 becomes 1/3
1/4 becomes 1/3
on a wrapper
1/5 becomes 1/3
1/4 becomes 1/3

.griid--resize-unequal(1,4,1,3)

all cells 1/3 or smaller become 1/2
on the grid
1/2
1/3 becomes 1/4
1/5 becomes 1/4
on a wrapper
1/2
1/3 becomes 1/4
1/5 becomes 1/4

.griid--resize-one-equal(3)

.griid-3 becomes single column (the equivalent of griid-1, but there is no griid-1)
on the grid
cell in griid-2
cell in griid-2
cell in griid-2
cell in griid-3 (become blocks)
cell in griid-3 (become blocks)
cell in griid-3 (become blocks)
cell in griid-3 (become blocks)
cell in griid-4
cell in griid-4
cell in griid-4
cell in griid-4
on a wrapper
cell in griid-2
cell in griid-2
cell in griid-2
cell in griid-3 (become blocks)
cell in griid-3 (become blocks)
cell in griid-3 (become blocks)
cell in griid-3 (become blocks)
cell in griid-4
cell in griid-4
cell in griid-4
cell in griid-4

.griid--resize-one-equal(4,3)

griid-3 becomes griid-4
on the grid
cell in griid-2
cell in griid-2
cell in griid-2
cell in griid-3 --> griid-4
cell in griid-3 --> griid-4
cell in griid-3 --> griid-4
cell in griid-3 --> griid-4
cell in griid-4
cell in griid-4
cell in griid-4
cell in griid-4
cell in griid-4
on a wrapper
cell in griid-2
cell in griid-2
cell in griid-2
cell in griid-3 --> griid-4
cell in griid-3 --> griid-4
cell in griid-3 --> griid-4
cell in griid-3 --> griid-4
cell in griid-4
cell in griid-4
cell in griid-4
cell in griid-4
cell in griid-4

.griid--resize-equal

.grid-x cells become blocks
on the grid
cell in griid-4 becomes a block
cell in griid-4 becomes a block
cell in griid-4 becomes a block
cell in griid-4 becomes a block
cell in griid-4 becomes a block
on a wrapper
cell in griid-4 becomes a block
cell in griid-4 becomes a block
cell in griid-4 becomes a block
cell in griid-4 becomes a block
cell in griid-4 becomes a block

.griid--resize-equal(3)

all .grid-x become .griid-3
on the grid
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
on a wrapper
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3

.griid--resize-equal(3,4)

all .griid-x with 4 or more columns become .griid-3
on the grid
cell in griid-2
cell in griid-2
cell in griid-2
cell in griid-3
cell in griid-3
cell in griid-3
cell in griid-3
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
on a wrapper
cell in griid-2
cell in griid-2
cell in griid-2
cell in griid-3
cell in griid-3
cell in griid-3
cell in griid-3
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3

.griid--resize-equal(3,4,5)

.grid-x with between 4 and 5 columns become .griid-3
on the grid
cell in griid-2
cell in griid-2
cell in griid-2
cell in griid-3
cell in griid-3
cell in griid-3
cell in griid-3
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-6
cell in griid-6
cell in griid-6
cell in griid-6
cell in griid-6
cell in griid-6
cell in griid-6
on a wrapper
cell in griid-2
cell in griid-2
cell in griid-2
cell in griid-3
cell in griid-3
cell in griid-3
cell in griid-3
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-6
cell in griid-6
cell in griid-6
cell in griid-6
cell in griid-6
cell in griid-6
cell in griid-6

.griid--drop-one(4)

.griid-4 loses a column
on the grid
cell in griid-3
cell in griid-3
cell in griid-3
cell in griid-3
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
cell in griid-5
cell in griid-5
cell in griid-5
cell in griid-5
cell in griid-5
cell in griid-5
on a wrapper
cell in griid-3
cell in griid-3
cell in griid-3
cell in griid-3
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
cell in griid-5
cell in griid-5
cell in griid-5
cell in griid-5
cell in griid-5
cell in griid-5

.griid--drop-one(2, 4)

.griid-4 loses two columns
on the grid
cell in griid-3
cell in griid-3
cell in griid-3
cell in griid-3
cell in griid-4 --> griid-2
cell in griid-4 --> griid-2
cell in griid-4 --> griid-2
cell in griid-4 --> griid-2
cell in griid-4 --> griid-2
cell in griid-5
cell in griid-5
cell in griid-5
cell in griid-5
cell in griid-5
cell in griid-5
on a wrapper
cell in griid-3
cell in griid-3
cell in griid-3
cell in griid-3
cell in griid-4 --> griid-2
cell in griid-4 --> griid-2
cell in griid-4 --> griid-2
cell in griid-4 --> griid-2
cell in griid-4 --> griid-2
cell in griid-5
cell in griid-5
cell in griid-5
cell in griid-5
cell in griid-5
cell in griid-5

.griid--drop

all .grid-x grids lose one column
on the grid
cell in griid-3 --> griid-2
cell in griid-3 --> griid-2
cell in griid-3 --> griid-2
cell in griid-3 --> griid-2
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
cell in griid-5 --> griid-4
cell in griid-5 --> griid-4
cell in griid-5 --> griid-4
cell in griid-5 --> griid-4
cell in griid-5 --> griid-4
cell in griid-5 --> griid-4
on a wrapper
cell in griid-3 --> griid-2
cell in griid-3 --> griid-2
cell in griid-3 --> griid-2
cell in griid-3 --> griid-2
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
cell in griid-4 --> griid-3
cell in griid-5 --> griid-4
cell in griid-5 --> griid-4
cell in griid-5 --> griid-4
cell in griid-5 --> griid-4
cell in griid-5 --> griid-4
cell in griid-5 --> griid-4

.griid--drop(2)

all .grid-x grids lose two columns
on the grid
cell in griid-3 --> block
cell in griid-3 --> block
cell in griid-3 --> block
cell in griid-3 --> block
cell in griid-4 --> griid-2
cell in griid-4 --> griid-2
cell in griid-4 --> griid-2
cell in griid-4 --> griid-2
cell in griid-4 --> griid-2
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
on a wrapper
cell in griid-3 --> block
cell in griid-3 --> block
cell in griid-3 --> block
cell in griid-3 --> block
cell in griid-4 --> griid-2
cell in griid-4 --> griid-2
cell in griid-4 --> griid-2
cell in griid-4 --> griid-2
cell in griid-4 --> griid-2
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3

.griid--drop(2,4)

.grid-x grids with 4 or more columns drop two columns
on the grid
cell in griid-3
cell in griid-3
cell in griid-3
cell in griid-3
cell in griid-4 --> griid-2
cell in griid-4 --> griid-2
cell in griid-4 --> griid-2
cell in griid-4 --> griid-2
cell in griid-4 --> griid-2
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-6 --> griid-4
cell in griid-6 --> griid-4
cell in griid-6 --> griid-4
cell in griid-6 --> griid-4
cell in griid-6 --> griid-4
cell in griid-6 --> griid-4
cell in griid-6 --> griid-4
on a wrapper
cell in griid-3
cell in griid-3
cell in griid-3
cell in griid-3
cell in griid-4 --> griid-2
cell in griid-4 --> griid-2
cell in griid-4 --> griid-2
cell in griid-4 --> griid-2
cell in griid-4 --> griid-2
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-6 --> griid-4
cell in griid-6 --> griid-4
cell in griid-6 --> griid-4
cell in griid-6 --> griid-4
cell in griid-6 --> griid-4
cell in griid-6 --> griid-4
cell in griid-6 --> griid-4

.griid--drop(2,4,5)

.grid-x with between 4 and 5 columns lose two columns
on the grid
cell in griid-2
cell in griid-2
cell in griid-2
cell in griid-3
cell in griid-3
cell in griid-3
cell in griid-3
cell in griid-4 --> griid-2
cell in griid-4 --> griid-2
cell in griid-4 --> griid-2
cell in griid-4 --> griid-2
cell in griid-4 --> griid-2
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-6
cell in griid-6
cell in griid-6
cell in griid-6
cell in griid-6
cell in griid-6
cell in griid-6
on a wrapper
cell in griid-2
cell in griid-2
cell in griid-2
cell in griid-3
cell in griid-3
cell in griid-3
cell in griid-3
cell in griid-4 --> griid-2
cell in griid-4 --> griid-2
cell in griid-4 --> griid-2
cell in griid-4 --> griid-2
cell in griid-4 --> griid-2
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-5 --> griid-3
cell in griid-6
cell in griid-6
cell in griid-6
cell in griid-6
cell in griid-6
cell in griid-6
cell in griid-6

.griid--row

turns `.grid-x .cell` and `.griid .cell-numerator-denominator` grids into `.griid .cell` grids
on the grid
cell (no change)
cell (no change)
cell (no change)
cell (no change)
cell (no change)
griid-3 --> single row
griid-3 --> single row
griid-3 --> single row
griid-3 --> single row
2/3 --> equal-width in one row
1/2 --> equal-width in one row
on a wrapper
cell (no change)
cell (no change)
cell (no change)
cell (no change)
cell (no change)
griid-3 cell
griid-3 cell
griid-3 cell
griid-3 cell
2/3
1/2

.griid--resize

by default, make everything blocks
on the grid
cell --> block
cell --> block
cell --> block
cell --> block
cell --> block
cell in griid-3 --> block
cell in griid-3 --> block
cell in griid-3 --> block
cell in griid-3 --> block
1/4 --> block
3/4 --> block
on a wrapper
cell --> block
cell --> block
cell --> block
cell --> block
cell --> block
cell in griid-3 --> block
cell in griid-3 --> block
cell in griid-3 --> block
cell in griid-3 --> block
1/4 --> block
3/4 --> block

.griid--resize(4)

turns all grids into griid-4
on the grid: .griid .cell
griid > cell --> griid-4 > cell
griid > cell --> griid-4 > cell
griid > cell --> griid-4 > cell
griid > cell --> griid-4 > cell
griid > cell --> griid-4 > cell
on the grid: .griid-x .cell
griid-3 > cell --> griid-4 > cell
griid-3 > cell --> griid-4 > cell
griid-3 > cell --> griid-4 > cell
griid-3 > cell --> griid-4 > cell
on the grid: .griid .cell-n-d
griid > cell-1-4 --> .griid-4 > cell
griid > cell-3-4 --> .griid-4 > cell
on a wrapper: .griid .cell
griid > cell --> griid-4 > cell
griid > cell --> griid-4 > cell
griid > cell --> griid-4 > cell
griid > cell --> griid-4 > cell
griid > cell --> griid-4 > cell
on a wrapper: .griid-x .cell
griid-3 > cell --> griid-4 > cell
griid-3 > cell --> griid-4 > cell
griid-3 > cell --> griid-4 > cell
griid-3 > cell --> griid-4 > cell
on a wrapper: .griid .cell-n-d
griid > cell-1-4 --> .griid-4 > cell
griid > cell-3-4 --> .griid-4 > cell