gridsheet
Examples
React Case4

Limit width, Resize, Multiple sheets

Drag right bottom of the sheets

Resize: both

A
B
C
D
E
F
1
A1
rgba(0,0,0,1)
B1
rgba(0,0,0,0.99)
C1
rgba(0,0,0,0.98)
D1
rgba(0,0,0,0.97)
E1
rgba(0,0,0,0.96)
F1
rgba(0,0,0,0.95)
2
A2
rgba(1,1,1,1)
B2
rgba(1,1,1,0.99)
C2
rgba(1,1,1,0.98)
D2
rgba(1,1,1,0.97)
E2
rgba(1,1,1,0.96)
F2
rgba(1,1,1,0.95)
3
A3
rgba(2,2,2,1)
B3
rgba(2,2,2,0.99)
C3
rgba(2,2,2,0.98)
D3
rgba(2,2,2,0.97)
E3
rgba(2,2,2,0.96)
F3
rgba(2,2,2,0.95)
4
A4
rgba(3,3,3,1)
B4
rgba(3,3,3,0.99)
C4
rgba(3,3,3,0.98)
D4
rgba(3,3,3,0.97)
E4
rgba(3,3,3,0.96)
F4
rgba(3,3,3,0.95)
5
A5
rgba(4,4,4,1)
B5
rgba(4,4,4,0.99)
C5
rgba(4,4,4,0.98)
D5
rgba(4,4,4,0.97)
E5
rgba(4,4,4,0.96)
F5
rgba(4,4,4,0.95)
6
A6
rgba(5,5,5,1)
B6
rgba(5,5,5,0.99)
C6
rgba(5,5,5,0.98)
D6
rgba(5,5,5,0.97)
E6
rgba(5,5,5,0.96)
F6
rgba(5,5,5,0.95)
7
A7
rgba(6,6,6,1)
B7
rgba(6,6,6,0.99)
C7
rgba(6,6,6,0.98)
D7
rgba(6,6,6,0.97)
E7
rgba(6,6,6,0.96)
F7
rgba(6,6,6,0.95)
8
A8
rgba(7,7,7,1)
B8
rgba(7,7,7,0.99)
C8
rgba(7,7,7,0.98)
D8
rgba(7,7,7,0.97)
E8
rgba(7,7,7,0.96)
F8
rgba(7,7,7,0.95)
9
A9
rgba(8,8,8,1)
B9
rgba(8,8,8,0.99)
C9
rgba(8,8,8,0.98)
D9
rgba(8,8,8,0.97)
E9
rgba(8,8,8,0.96)
F9
rgba(8,8,8,0.95)
10
A10
rgba(9,9,9,1)
B10
rgba(9,9,9,0.99)
C10
rgba(9,9,9,0.98)
D10
rgba(9,9,9,0.97)
E10
rgba(9,9,9,0.96)
F10
rgba(9,9,9,0.95)
11
A11
rgba(10,10,10,1)
B11
rgba(10,10,10,0.99)
C11
rgba(10,10,10,0.98)
D11
rgba(10,10,10,0.97)
E11
rgba(10,10,10,0.96)
F11
rgba(10,10,10,0.95)

Resize: vertical

A
B
C
D
E
F
1
A1
#ffff00
B1
#fffe00
C1
#fffd00
D1
#fffc00
E1
#fffb00
F1
#fffa00
2
A2
#feff00
B2
#fefe00
C2
#fefd00
D2
#fefc00
E2
#fefb00
F2
#fefa00
3
A3
#fdff00
B3
#fdfe00
C3
#fdfd00
D3
#fdfc00
E3
#fdfb00
F3
#fdfa00
4
A4
#fcff00
B4
#fcfe00
C4
#fcfd00
D4
#fcfc00
E4
#fcfb00
F4
#fcfa00
5
A5
#fbff00
B5
#fbfe00
C5
#fbfd00
D5
#fbfc00
E5
#fbfb00
F5
#fbfa00
6
A6
#faff00
B6
#fafe00
C6
#fafd00
D6
#fafc00
E6
#fafb00
F6
#fafa00
7
A7
#f9ff00
B7
#f9fe00
C7
#f9fd00
D7
#f9fc00
E7
#f9fb00
F7
#f9fa00
8
A8
#f8ff00
B8
#f8fe00
C8
#f8fd00
D8
#f8fc00
E8
#f8fb00
F8
#f8fa00
9
A9
#f7ff00
B9
#f7fe00
C9
#f7fd00
D9
#f7fc00
E9
#f7fb00
F9
#f7fa00
10
A10
#f6ff00
B10
#f6fe00
C10
#f6fd00
D10
#f6fc00
E10
#f6fb00
F10
#f6fa00
11
A11
#f5ff00
B11
#f5fe00
C11
#f5fd00
D11
#f5fc00
E11
#f5fb00
F11
#f5fa00

Resize: horizontal

A
B
C
D
E
F
1
A1
#ff00ff
B1
#ff00fe
C1
#ff00fd
D1
#ff00fc
E1
#ff00fb
F1
#ff00fa
2
A2
#fe00ff
B2
#fe00fe
C2
#fe00fd
D2
#fe00fc
E2
#fe00fb
F2
#fe00fa
3
A3
#fd00ff
B3
#fd00fe
C3
#fd00fd
D3
#fd00fc
E3
#fd00fb
F3
#fd00fa
4
A4
#fc00ff
B4
#fc00fe
C4
#fc00fd
D4
#fc00fc
E4
#fc00fb
F4
#fc00fa
5
A5
#fb00ff
B5
#fb00fe
C5
#fb00fd
D5
#fb00fc
E5
#fb00fb
F5
#fb00fa
6
A6
#fa00ff
B6
#fa00fe
C6
#fa00fd
D6
#fa00fc
E6
#fa00fb
F6
#fa00fa
7
A7
#f900ff
B7
#f900fe
C7
#f900fd
D7
#f900fc
E7
#f900fb
F7
#f900fa
8
A8
#f800ff
B8
#f800fe
C8
#f800fd
D8
#f800fc
E8
#f800fb
F8
#f800fa
9
A9
#f700ff
B9
#f700fe
C9
#f700fd
D9
#f700fc
E9
#f700fb
F9
#f700fa
10
A10
#f600ff
B10
#f600fe
C10
#f600fd
D10
#f600fc
E10
#f600fb
F10
#f600fa
11
A11
#f500ff
B11
#f500fe
C11
#f500fd
D11
#f500fc
E11
#f500fb
F11
#f500fa

Resize: none

A
B
C
D
E
F
1
A1
#00ffff
B1
#00fffe
C1
#00fffd
D1
#00fffc
E1
#00fffb
F1
#00fffa
2
A2
#00feff
B2
#00fefe
C2
#00fefd
D2
#00fefc
E2
#00fefb
F2
#00fefa
3
A3
#00fdff
B3
#00fdfe
C3
#00fdfd
D3
#00fdfc
E3
#00fdfb
F3
#00fdfa
4
A4
#00fcff
B4
#00fcfe
C4
#00fcfd
D4
#00fcfc
E4
#00fcfb
F4
#00fcfa
5
A5
#00fbff
B5
#00fbfe
C5
#00fbfd
D5
#00fbfc
E5
#00fbfb
F5
#00fbfa
6
A6
#00faff
B6
#00fafe
C6
#00fafd
D6
#00fafc
E6
#00fafb
F6
#00fafa
7
A7
#00f9ff
B7
#00f9fe
C7
#00f9fd
D7
#00f9fc
E7
#00f9fb
F7
#00f9fa
8
A8
#00f8ff
B8
#00f8fe
C8
#00f8fd
D8
#00f8fc
E8
#00f8fb
F8
#00f8fa
9
A9
#00f7ff
B9
#00f7fe
C9
#00f7fd
D9
#00f7fc
E9
#00f7fb
F9
#00f7fa
10
A10
#00f6ff
B10
#00f6fe
C10
#00f6fd
D10
#00f6fc
E10
#00f6fb
F10
#00f6fa
11
A11
#00f5ff
B11
#00f5fe
C11
#00f5fd
D11
#00f5fc
E11
#00f5fb
F11
#00f5fa

Source code

Loading...

  • style and className props will be passed.

    • { maxWidth: "100%"} prevents the sheet exceeding the parent width.

  • options.sheetResize means css resize <https://developer.mozilla.org/en-US/docs/Web/CSS/resize>__ of the sheet.

React Case3React Case5
A1
rgba(0,0,0,1)
A1
#ffff00
A1
#ff00ff
A1
#00ffff