Extended Grid

Shorthand aliases for grid properties

import { extendedGrid } from 'jynx'

The extendedGrid function gives you control of a component's grid styles with additional support for shorthand aliases not found in the base grid function.

All the verbose props are still accessible and can be used interchangeably with the aliases; this is simply an extension of the original function that allows the use of a more concise syntax.

Usage

To use the extendedGrid function, create a component using the ExtendedGridProps type and include the function within it's style argument.

/* Import the function and its corresponding props type */
import { extendedGrid, ExtendedGridProps } from 'jynx'


/* Then define a component with the type and include the 
 function within its style argument */
export const Component = styled.div<ExtendedGridProps>`
    ${extendedGrid}
  `

/* Or using the legacy functional syntax */
export const Component = styled.div<ExtendedGridProps>((props) => `
    ${extendedGrid}
  `)

Props

By default, when passing a string to any extendedGrid props, the raw css value is used. This means you can define extendedGrid styles however you normally would:

<Component justifyItems='space-between' />

As with the grid function, when using props like alignItems and justifyContent that support a set of pre-declared string values (flex-start, space-between, etc), these should be provided as suggestions in your IDE.

Additionally, any standard named values (inherit, initial, etc) are available to use, and when using typescript, will show up as suggestions in your IDE.

Types

When working in typescript, use the ExtendedGridProps interface to provide reliable type definitions for your components and value suggestions in your IDE.

interface ExtendedGridProps extends GridProps {
  template?: StyleProp<CSS.Property.GridTemplate>
  templateColumns?: StyleProp<CSS.Property.GridTemplateColumns>
  templateRows?: StyleProp<CSS.Property.GridTemplateRows>
  templateAreas?: StyleProp<CSS.Property.GridTemplateAreas>
  justifyItems?: StyleProp<CSS.Property.JustifyItems>
  alignItems?: StyleProp<CSS.Property.AlignItems>
  placeItems?: StyleProp<CSS.Property.PlaceItems>
  justifyContent?: StyleProp<CSS.Property.JustifyContent>
  alignContent?: StyleProp<CSS.Property.AlignContent>
  placeContent?: StyleProp<CSS.Property.PlaceContent>
  autoColumns?: StyleProp<CSS.Property.GridAutoColumns>
  autoRows?: StyleProp<CSS.Property.GridAutoRows>
  autoFlow?: StyleProp<CSS.Property.GridAutoFlow>

  // Child Props
  column?: StyleProp<CSS.Property.GridColumn>
  row?: StyleProp<CSS.Property.GridRow>
  area?: StyleProp<CSS.Property.GridArea>
  rowStart?: StyleProp<CSS.Property.GridRowStart>
  rowEnd?: StyleProp<CSS.Property.GridRowEnd>
  columnStart?: StyleProp<CSS.Property.GridColumnStart>
  columnEnd?: StyleProp<CSS.Property.GridColumnEnd>
}

API

The extendedGrid function allows for a number of props to be passed to your component from directly within your jsx / tsx.

Prop	Shorthand	CSS Property	Theme Scale
template		grid-template
templateColumns		grid-template-columns
templateRows		grid-template-rows
templateAreas		grid-template-areas
justifyItems		justify-items
alignItems		align-items
placeItems		place-items
justifyContent		justify-content
alignContent		align-content
placeContent		place-content
autoColumns		grid-auto-columns
autoRows		grid-auto-rows
autoFlow		grid-auto-flow
column		grid-column
row		grid-row
area		grid-area
rowStart		grid-row-start
rowEnd		grid-row-end
columnStart		grid-column-start
columnEnd		grid-column-end

These props are in addition to those available in grid.

Examples

/* using plain CSS values */
<Component templateRows='40px 4em 40px' />


/* based on a conditional */
<Component autoFlow={isFullWidth ? 'column' : 'row dense'} />


/* using responsive styles */
<Component placeItems={['flex-start', 'center', null, 'flex-start']} />

<Component columnEnd={{_: 'span 2', md: 4}} />