Grid Concept
Building a fluid grid solution with mobile first approach using CSS in JS.
The grid works with StyledGrid container and GridItem as the grid items.
- The immediate child of GridItem should be an HTMLElement.
- A StyledGrid should have at least one child.
- The gutters are done with
padding-left
andpadding-bottom
in theGridItem
and theStyledGrid
prevents the horizontal shift with a negativemargin-left
and a negativemargin-bottom
. - StyledGrid has following props available:
type TBreakpoints =| "mobileS"| "mobileM"| "mobileL"| "tablet"| "laptop"| "laptopL"| "desktop";type TGutter = "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "none";interface IStyledGrid {/** fraction: flex-basis % */fraction?: number;verticalStretch?: boolean | TBreakpoints;/** auto: flex-basis */auto?: boolean | TBreakpoints;/** autoFill: flex-grow */autoFill?: boolean | TBreakpoints;jStart?: boolean | TBreakpoints;jCenter?: boolean | TBreakpoints;jEnd?: boolean | TBreakpoints;jBetween?: boolean | TBreakpoints;jAround?: boolean | TBreakpoints;aTop?: boolean | TBreakpoints;aCenter?: boolean | TBreakpoints;aEnd?: boolean | TBreakpoints;gutter?: TGutter;fractionWithBp?: string[];noWrap?: boolean | TBreakpoints;}
- Most of the props have an optional string parameter which states the breakpoint (min-width)
- GridItem has following props available:
enum EPositions {first = "first",last = "last",}interface IGridItem {fraction?: number;fractionWithBp?: string[];aTop?: boolean | TBreakpoints;aCenter?: boolean | TBreakpoints;aEnd?: boolean | TBreakpoints;position?: EPositions;pull?: boolean | TBreakpoints;push?: boolean | TBreakpoints;}
- Named breakpoints available as per current theme are as follows:
mobileS: 320mobileM: 375mobileL: 425tablet: 768laptop: 1024laptopL: 1440desktop: 2560
Size
Item with some content
Item
two lines
two lines
Item
Item
Stretch
Item with some content
Item
two lines
two lines
Item
Item
Fraction Power
full
1/2
1/2
1/4
1/4
1/4
1/4
1/5
1/5
1/5
1/5
1/5
1/6
1/6
1/6
1/6
1/6
1/6
1/7
1/7
1/7
1/7
1/7
1/7
1/7
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/8
Grid Auto
Item with some content
Item
two lines
two lines
Item
Item
Grid Stretch & Auto
Item with some content
Item
two lines
two lines
Item
Item
Grid Fill
Add any number of items to a container
Item with some content
Item
two lines
two lines
Item
Item
Grid Stretch & Fill
Item with some content
Item
two lines
two lines
Item
Item
Alignment
Grid Horizontal Alignment
Item
Item
Item
Item
Item
Item
Grid Vertical Alignment
Item
Item
three
lines
three
lines
Item
Item
Item
three
lines
three
lines
Item
Item
Item
three
lines
three
lines
Item
Grid Item Vertical Alignment
Align each item independently in the row
Item
Item
three
lines
three
lines
Item
Item
Distribution
Space Between
Item
Item
Item
Space Around
Item
Item
Item
Ordering
Item First Position
Item 1
Item 2
Item 3
Item 4
Item Last Position
Item 1
Item 2
Item 3
Item 4
Pull & Push Item
When using pull & push, use noWrap to prevent items to wrap on new row.
Item pull
Item
Item push
Nested Grid
Item
Item
Item
2 lines
2 lines
Item
Item
Item