Grid
creates visual consistency between layouts while allowing flexibility across a wide variety of designs. Starling UI is based on a 12-column responsive grid layout.
Note: I have set the root font-size to 10px for this library.
Instructions to import the Grid component in your CSS or HTML:
Horizontal Grid system
can be used for 1x1 to 12x12 horizontal grids
g=12
g=12
g=12
g=12
g=12
g=12
g=12
g=12
g=12
g=12
g=12
g=12
g=11
g=11
g=11
g=11
g=11
g=11
g=11
g=11
g=11
g=11
g=11
g=10
g=10
g=10
g=10
g=10
g=10
g=10
g=10
g=10
g=10
g=9
g=9
g=9
g=9
g=9
g=9
g=9
g=9
g=9
g=8
g=8
g=8
g=8
g=8
g=8
g=8
g=8
g=7
g=7
g=7
g=7
g=7
g=7
g=7
g=6
g=6
g=6
g=6
g=6
g=6
g=5
g=5
g=5
g=5
g=5
g=4
g=4
g=4
g=4
g=3
g=3
g=3
g=2
g=2
g=1
Vertical Grid system
can be used for 1x1 to 12x12 vertical grids
g=12
g=12
g=12
g=12
g=12
g=12
g=12
g=12
g=12
g=12
g=12
g=12
g=11
g=11
g=11
g=11
g=11
g=11
g=11
g=11
g=11
g=11
g=11
g=10
g=10
g=10
g=10
g=10
g=10
g=10
g=10
g=10
g=10
g=9
g=9
g=9
g=9
g=9
g=9
g=9
g=9
g=9
g=8
g=8
g=8
g=8
g=8
g=8
g=8
g=8
g=7
g=7
g=7
g=7
g=7
g=7
g=7
g=6
g=6
g=6
g=6
g=6
g=6
g=5
g=5
g=5
g=5
g=5
g=4
g=4
g=4
g=4
g=3
g=3
g=3
g=2
g=2
g=1
Flexible Grid system
uses a 12-column responsive grid layout. You can use any number of items inside the grid with a total width-span of 12:
Item 1 (g=8)
Item 2 (g=4)
Item 1 (g=6)
Item 2 (g=6)
Item 1 (g=3)
Item 2 (g=9)
Item 1 (g=4)
Item 2 (g=4)
Item 3 (g=4)
Item 1 (g=3)
Item 2 (g=6)
Item 3 (g=3)
Item 1 (g=4)
Item 2 (g=6)
Item 3 (g=2)