Pratik Web Nuggets

Home

Branding

Grid Grid Concept Size Alignment Distribution Ordering

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

<StyledGrid fractionWithBp={['1/2@tablet', '1/4@laptop']}>
  <GridItem>
    <div className="demo">Item with some content</div>
  </GridItem>
  <GridItem>
    <div className="demo">
      Item
      <br />
      two lines
    </div>
  </GridItem>
  <GridItem>
    <div className="demo">Item</div>
  </GridItem>
  <GridItem>
    <div className="demo">Item</div>
  </GridItem>
</StyledGrid><StyledGrid fractionWithBp={['1/2@tablet', '1/4@laptop']}>
  <GridItem>
    <div className="demo">Item with some content</div>
  </GridItem>
  <GridItem>
    <div className="demo">
      Item
      <br />
      two lines
    </div>
  </GridItem>
  <GridItem>
    <div className="demo">Item</div>
  </GridItem>
  <GridItem>
    <div className="demo">Item</div>
  </GridItem>
</StyledGrid>

Stretch

Item with some content

Item
two lines

Item

<StyledGrid verticalStretch fractionWithBp={['1/2@tablet', '1/4@laptop']}>
  <GridItem>
    <div className="demo">Item with some content</div>
  </GridItem>
  <GridItem>
    <div className="demo">
      Item
      <br />
      two lines
    </div>
  </GridItem>
  <GridItem>
    <div className="demo">Item</div>
  </GridItem>
  <GridItem>
    <div className="demo">Item</div>
  </GridItem>
</StyledGrid><StyledGrid verticalStretch fractionWithBp={['1/2@tablet', '1/4@laptop']}>
  <GridItem>
    <div className="demo">Item with some content</div>
  </GridItem>
  <GridItem>
    <div className="demo">
      Item
      <br />
      two lines
    </div>
  </GridItem>
  <GridItem>
    <div className="demo">Item</div>
  </GridItem>
  <GridItem>
    <div className="demo">Item</div>
  </GridItem>
</StyledGrid>

Fraction Power

full

1/2

1/4

1/5

1/6

1/7

1/8

<StyledGrid gutter="xs">
  <GridItem>
    <div className="demo">full</div>
  </GridItem>
  {Array.from(Array(2).keys()).map(x => (
    <GridItem key={x} fraction={1 / 2}>
      <div className="demo">1/2</div>
    </GridItem>
  ))}
  {Array.from(Array(4).keys()).map(x => (
    <GridItem key={x} fraction={1 / 4}>
      <div className="demo">1/4</div>
    </GridItem>
  ))}
  {Array.from(Array(5).keys()).map(x => (
    <GridItem key={x} fraction={1 / 5}>
      <div className="demo">1/5</div>
    </GridItem>
  ))}
  {Array.from(Array(6).keys()).map(x => (
    <GridItem key={x} fraction={1 / 6}>
      <div className="demo">1/6</div>
    </GridItem>
  ))}
  {Array.from(Array(7).keys()).map(x => (
    <GridItem key={x} fraction={1 / 7}>
      <div className="demo">1/7</div>
    </GridItem>
  ))}
  {Array.from(Array(8).keys()).map(x => (
    <GridItem key={x} fraction={1 / 8}>
      <div className="demo">1/8</div>
    </GridItem>
  ))}
</StyledGrid><StyledGrid gutter="xs">
  <GridItem>
    <div className="demo">full</div>
  </GridItem>
  {Array.from(Array(2).keys()).map(x => (
    <GridItem key={x} fraction={1 / 2}>
      <div className="demo">1/2</div>
    </GridItem>
  ))}
  {Array.from(Array(4).keys()).map(x => (
    <GridItem key={x} fraction={1 / 4}>
      <div className="demo">1/4</div>
    </GridItem>
  ))}
  {Array.from(Array(5).keys()).map(x => (
    <GridItem key={x} fraction={1 / 5}>
      <div className="demo">1/5</div>
    </GridItem>
  ))}
  {Array.from(Array(6).keys()).map(x => (
    <GridItem key={x} fraction={1 / 6}>
      <div className="demo">1/6</div>
    </GridItem>
  ))}
  {Array.from(Array(7).keys()).map(x => (
    <GridItem key={x} fraction={1 / 7}>
      <div className="demo">1/7</div>
    </GridItem>
  ))}
  {Array.from(Array(8).keys()).map(x => (
    <GridItem key={x} fraction={1 / 8}>
      <div className="demo">1/8</div>
    </GridItem>
  ))}
</StyledGrid>

Grid Auto

Item with some content

Item
two lines

Item

<StyledGrid auto>
  <GridItem>
    <div className="demo">Item with some content</div>
  </GridItem>
  <GridItem>
    <div className="demo">
      Item
      <br />
      two lines
    </div>
  </GridItem>
  <GridItem>
    <div className="demo">Item</div>
  </GridItem>
  <GridItem>
    <div className="demo">Item</div>
  </GridItem>
</StyledGrid><StyledGrid auto>
  <GridItem>
    <div className="demo">Item with some content</div>
  </GridItem>
  <GridItem>
    <div className="demo">
      Item
      <br />
      two lines
    </div>
  </GridItem>
  <GridItem>
    <div className="demo">Item</div>
  </GridItem>
  <GridItem>
    <div className="demo">Item</div>
  </GridItem>
</StyledGrid>

Grid Stretch & Auto

Item with some content

Item
two lines

Item

<StyledGrid auto verticalStretch>
  <GridItem>
    <div className="demo">Item with some content</div>
  </GridItem>
  <GridItem>
    <div className="demo">
      Item
      <br />
      two lines
    </div>
  </GridItem>
  <GridItem>
    <div className="demo">Item</div>
  </GridItem>
  <GridItem>
    <div className="demo">Item</div>
  </GridItem>
</StyledGrid><StyledGrid auto verticalStretch>
  <GridItem>
    <div className="demo">Item with some content</div>
  </GridItem>
  <GridItem>
    <div className="demo">
      Item
      <br />
      two lines
    </div>
  </GridItem>
  <GridItem>
    <div className="demo">Item</div>
  </GridItem>
  <GridItem>
    <div className="demo">Item</div>
  </GridItem>
</StyledGrid>

Grid Fill

Add any number of items to a container

Item with some content

Item
two lines

Item

<StyledGrid autoFill className="demo">
  <GridItem>
    <div className="demo">Item with some content</div>
  </GridItem>
  <GridItem>
    <div className="demo">
      Item
      <br />
      two lines
    </div>
  </GridItem>
  <GridItem>
    <div className="demo">Item</div>
  </GridItem>
  <GridItem>
    <div className="demo">Item</div>
  </GridItem>
</StyledGrid><StyledGrid autoFill className="demo">
  <GridItem>
    <div className="demo">Item with some content</div>
  </GridItem>
  <GridItem>
    <div className="demo">
      Item
      <br />
      two lines
    </div>
  </GridItem>
  <GridItem>
    <div className="demo">Item</div>
  </GridItem>
  <GridItem>
    <div className="demo">Item</div>
  </GridItem>
</StyledGrid>

Grid Stretch & Fill

Item with some content

Item
two lines

Item

<StyledGrid autoFill stretch>
  <GridItem>
    <div className="demo">Item with some content</div>
  </GridItem>
  <GridItem>
    <div className="demo">
      Item
      <br />
      two lines
    </div>
  </GridItem>
  <GridItem>
    <div className="demo">Item</div>
  </GridItem>
  <GridItem>
    <div className="demo">Item</div>
  </GridItem>
</StyledGrid><StyledGrid autoFill stretch>
  <GridItem>
    <div className="demo">Item with some content</div>
  </GridItem>
  <GridItem>
    <div className="demo">
      Item
      <br />
      two lines
    </div>
  </GridItem>
  <GridItem>
    <div className="demo">Item</div>
  </GridItem>
  <GridItem>
    <div className="demo">Item</div>
  </GridItem>
</StyledGrid>

Alignment

Grid Horizontal Alignment

Item

<StyledGrid jStart>
  <GridItem fraction={1 / 6}>
    <div className="demo">Item</div>
  </GridItem>
  <GridItem fraction={1 / 6}>
    <div className="demo">Item</div>
  </GridItem>
</StyledGrid><StyledGrid jStart>
  <GridItem fraction={1 / 6}>
    <div className="demo">Item</div>
  </GridItem>
  <GridItem fraction={1 / 6}>
    <div className="demo">Item</div>
  </GridItem>
</StyledGrid>

Item

<StyledGrid jCenter>
  <GridItem fraction={1 / 6}>
    <div className="demo">Item</div>
  </GridItem>
  <GridItem fraction={1 / 6}>
    <div className="demo">Item</div>
  </GridItem>
</StyledGrid><StyledGrid jCenter>
  <GridItem fraction={1 / 6}>
    <div className="demo">Item</div>
  </GridItem>
  <GridItem fraction={1 / 6}>
    <div className="demo">Item</div>
  </GridItem>
</StyledGrid>

Item

<StyledGrid jEnd>
  <GridItem fraction={1 / 6}>
    <div className="demo">Item</div>
  </GridItem>
  <GridItem fraction={1 / 6}>
    <div className="demo">Item</div>
  </GridItem>
</StyledGrid><StyledGrid jEnd>
  <GridItem fraction={1 / 6}>
    <div className="demo">Item</div>
  </GridItem>
  <GridItem fraction={1 / 6}>
    <div className="demo">Item</div>
  </GridItem>
</StyledGrid>

Grid Vertical Alignment

Item

Item
three
lines

Item

<StyledGrid fraction={1 / 3} aTop>
  <GridItem>
    <div className="demo">Item</div>
  </GridItem>
  <GridItem>
    <div className="demo">
      Item
      <br />
      three
      <br />
      lines
    </div>
  </GridItem>
  <GridItem>
    <div className="demo">Item</div>
  </GridItem>
</StyledGrid><StyledGrid fraction={1 / 3} aTop>
  <GridItem>
    <div className="demo">Item</div>
  </GridItem>
  <GridItem>
    <div className="demo">
      Item
      <br />
      three
      <br />
      lines
    </div>
  </GridItem>
  <GridItem>
    <div className="demo">Item</div>
  </GridItem>
</StyledGrid>

Item

Item
three
lines

Item

<StyledGrid fraction={1 / 3} aCenter>
  <GridItem>
    <div className="demo">Item</div>
  </GridItem>
  <GridItem>
    <div className="demo">
      Item
      <br />
      three
      <br />
      lines
    </div>
  </GridItem>
  <GridItem>
    <div className="demo">Item</div>
  </GridItem>
</StyledGrid><StyledGrid fraction={1 / 3} aCenter>
  <GridItem>
    <div className="demo">Item</div>
  </GridItem>
  <GridItem>
    <div className="demo">
      Item
      <br />
      three
      <br />
      lines
    </div>
  </GridItem>
  <GridItem>
    <div className="demo">Item</div>
  </GridItem>
</StyledGrid>

Item

Item
three
lines

Item

<StyledGrid fraction={1 / 3} aEnd>
  <GridItem>
    <div className="demo">Item</div>
  </GridItem>
  <GridItem>
    <div className="demo">
      Item
      <br />
      three
      <br />
      lines
    </div>
  </GridItem>
  <GridItem>
    <div className="demo">Item</div>
  </GridItem>
</StyledGrid><StyledGrid fraction={1 / 3} aEnd>
  <GridItem>
    <div className="demo">Item</div>
  </GridItem>
  <GridItem>
    <div className="demo">
      Item
      <br />
      three
      <br />
      lines
    </div>
  </GridItem>
  <GridItem>
    <div className="demo">Item</div>
  </GridItem>
</StyledGrid>

Grid Item Vertical Alignment

Align each item independently in the row

Item

Item
three
lines

Item

<StyledGrid>
  <GridItem fraction={1 / 4} aTop>
    <div className="demo">Item</div>
  </GridItem>
  <GridItem fraction={1 / 4}>
    <div className="demo">
      Item
      <br />
      three
      <br />
      lines
    </div>
  </GridItem>
  <GridItem fraction={1 / 4} aCenter>
    <div className="demo">Item</div>
  </GridItem>
  <GridItem fraction={1 / 4} aEnd>
    <div className="demo">Item</div>
  </GridItem>
</StyledGrid><StyledGrid>
  <GridItem fraction={1 / 4} aTop>
    <div className="demo">Item</div>
  </GridItem>
  <GridItem fraction={1 / 4}>
    <div className="demo">
      Item
      <br />
      three
      <br />
      lines
    </div>
  </GridItem>
  <GridItem fraction={1 / 4} aCenter>
    <div className="demo">Item</div>
  </GridItem>
  <GridItem fraction={1 / 4} aEnd>
    <div className="demo">Item</div>
  </GridItem>
</StyledGrid>

Distribution

Space Between

Item

<StyledGrid jBetween>
  <GridItem fraction={1 / 6} aTop>
    <div className="demo">Item</div>
  </GridItem>
  <GridItem fraction={1 / 6} aCenter>
    <div className="demo">Item</div>
  </GridItem>
  <GridItem fraction={1 / 6} aEnd>
    <div className="demo">Item</div>
  </GridItem>
</StyledGrid><StyledGrid jBetween>
  <GridItem fraction={1 / 6} aTop>
    <div className="demo">Item</div>
  </GridItem>
  <GridItem fraction={1 / 6} aCenter>
    <div className="demo">Item</div>
  </GridItem>
  <GridItem fraction={1 / 6} aEnd>
    <div className="demo">Item</div>
  </GridItem>
</StyledGrid>

Space Around

Item

<StyledGrid jAround>
  <GridItem fraction={1 / 6} aTop>
    <div className="demo">Item</div>
  </GridItem>
  <GridItem fraction={1 / 6} aCenter>
    <div className="demo">Item</div>
  </GridItem>
  <GridItem fraction={1 / 6} aEnd>
    <div className="demo">Item</div>
  </GridItem>
</StyledGrid><StyledGrid jAround>
  <GridItem fraction={1 / 6} aTop>
    <div className="demo">Item</div>
  </GridItem>
  <GridItem fraction={1 / 6} aCenter>
    <div className="demo">Item</div>
  </GridItem>
  <GridItem fraction={1 / 6} aEnd>
    <div className="demo">Item</div>
  </GridItem>
</StyledGrid>

Ordering

Item First Position

Item 1

Item 2

Item 3

Item 4

<StyledGrid jAround>
  <GridItem fraction={1 / 4}>
    <div className="demo">Item 1</div>
  </GridItem>
  <GridItem fraction={1 / 4}>
    <div className="demo">Item 2</div>
  </GridItem>
  <GridItem position="first" fraction={1 / 4}>
    <div
      className="demo"
      style={{ background: '#587193', fontWeight: 700, color: 'white' }}
    >
      Item 3
    </div>
  </GridItem>
  <GridItem fraction={1 / 4}>
    <div className="demo">Item 4</div>
  </GridItem>
</StyledGrid><StyledGrid jAround>
  <GridItem fraction={1 / 4}>
    <div className="demo">Item 1</div>
  </GridItem>
  <GridItem fraction={1 / 4}>
    <div className="demo">Item 2</div>
  </GridItem>
  <GridItem position="first" fraction={1 / 4}>
    <div
      className="demo"
      style={{ background: '#587193', fontWeight: 700, color: 'white' }}
    >
      Item 3
    </div>
  </GridItem>
  <GridItem fraction={1 / 4}>
    <div className="demo">Item 4</div>
  </GridItem>
</StyledGrid>

Item Last Position

Item 1

Item 2

Item 3

Item 4

<StyledGrid jAround>
  <GridItem position="last" fraction={1 / 4}>
    <div
      className="demo"
      style={{ background: '#587193', fontWeight: 700, color: 'white' }}
    >
      Item 1
    </div>
  </GridItem>
  <GridItem fraction={1 / 4}>
    <div className="demo">Item 2</div>
  </GridItem>
  <GridItem fraction={1 / 4}>
    <div className="demo">Item 3</div>
  </GridItem>
  <GridItem fraction={1 / 4}>
    <div className="demo">Item 4</div>
  </GridItem>
</StyledGrid><StyledGrid jAround>
  <GridItem position="last" fraction={1 / 4}>
    <div
      className="demo"
      style={{ background: '#587193', fontWeight: 700, color: 'white' }}
    >
      Item 1
    </div>
  </GridItem>
  <GridItem fraction={1 / 4}>
    <div className="demo">Item 2</div>
  </GridItem>
  <GridItem fraction={1 / 4}>
    <div className="demo">Item 3</div>
  </GridItem>
  <GridItem fraction={1 / 4}>
    <div className="demo">Item 4</div>
  </GridItem>
</StyledGrid>

Pull & Push Item

When using pull & push, use noWrap to prevent items to wrap on new row.

Item pull

Item

Item push

<StyledGrid noWrap>
  <GridItem pull>
    <div className="demo">Item pull</div>
  </GridItem>
  <GridItem>
    <div className="demo">Item</div>
  </GridItem>
  <GridItem push>
    <div className="demo">Item push</div>
  </GridItem>
</StyledGrid><StyledGrid noWrap>
  <GridItem pull>
    <div className="demo">Item pull</div>
  </GridItem>
  <GridItem>
    <div className="demo">Item</div>
  </GridItem>
  <GridItem push>
    <div className="demo">Item push</div>
  </GridItem>
</StyledGrid>

Nested Grid

Item

Item
2 lines

Item

<StyledGrid verticalStretch>
  <GridItem fractionWithBp={['1/2@tablet']}>
    <StyledGrid verticalStretch>
      <GridItem fractionWithBp={['1/2@tablet']}>
        <div className="demo">Item</div>
      </GridItem>
      <GridItem fractionWithBp={['1/2@laptop']}>
        <StyledGrid verticalStretch>
          <GridItem fractionWithBp={['1/2@laptop']}>
            <div className="demo">Item</div>
          </GridItem>
          <GridItem fractionWithBp={['1/2@laptop']}>
            <div className="demo">
              Item
              <br />2 lines
            </div>
          </GridItem>
        </StyledGrid>
      </GridItem>
      <GridItem fractionWithBp={['1/2@tablet']}>
        <div className="demo">Item</div>
      </GridItem>
      <GridItem fractionWithBp={['1/2@tablet']}>
        <div className="demo">Item</div>
      </GridItem>
    </StyledGrid>
  </GridItem>
  <GridItem fractionWithBp={['1/2@tablet']}>
    <div className="demo">Item</div>
  </GridItem>
</StyledGrid><StyledGrid verticalStretch>
  <GridItem fractionWithBp={['1/2@tablet']}>
    <StyledGrid verticalStretch>
      <GridItem fractionWithBp={['1/2@tablet']}>
        <div className="demo">Item</div>
      </GridItem>
      <GridItem fractionWithBp={['1/2@laptop']}>
        <StyledGrid verticalStretch>
          <GridItem fractionWithBp={['1/2@laptop']}>
            <div className="demo">Item</div>
          </GridItem>
          <GridItem fractionWithBp={['1/2@laptop']}>
            <div className="demo">
              Item
              <br />2 lines
            </div>
          </GridItem>
        </StyledGrid>
      </GridItem>
      <GridItem fractionWithBp={['1/2@tablet']}>
        <div className="demo">Item</div>
      </GridItem>
      <GridItem fractionWithBp={['1/2@tablet']}>
        <div className="demo">Item</div>
      </GridItem>
    </StyledGrid>
  </GridItem>
  <GridItem fractionWithBp={['1/2@tablet']}>
    <div className="demo">Item</div>
  </GridItem>
</StyledGrid>

Pratik Web Nuggets

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Grid Concept

Grid Concept