logo

Pratik Web Nuggets

Home
Branding
GridGrid ConceptSizeAlignmentDistributionOrdering
Elements
Commit Helpers

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 and padding-bottom in the GridItem and the StyledGrid prevents the horizontal shift with a negative margin-left and a negative margin-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: 320
mobileM: 375
mobileL: 425
tablet: 768
laptop: 1024
laptopL: 1440
desktop: 2560

Size

Item with some content
Item
two lines
Item
Item

Stretch

Item with some content
Item
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
Item
Item

Grid Stretch & Auto

Item with some content
Item
two lines
Item
Item

Grid Fill

Add any number of items to a container

Item with some content
Item
two lines
Item
Item

Grid Stretch & Fill

Item with some content
Item
two lines
Item
Item

Alignment

Grid Horizontal Alignment

Item
Item
Item
Item
Item
Item

Grid Vertical Alignment

Item
Item
three
lines
Item
Item
Item
three
lines
Item
Item
Item
three
lines
Item

Grid Item Vertical Alignment

Align each item independently in the row

Item
Item
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
Item
Item
Item