Grid

Style a component's grid properties

import { grid } from 'jynx'

The grid function gives you control of a component's grid styles, providing support for both the shorthand property and all its sub-properties including grid-template-rows, grid-auto-flow, grid-align-content, etc.

Usage

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

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


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

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

Props

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

<Component gridTemplateColumns='repeat(4, 240px)' />

When using props like alignItems and justifyContent that support a set of pre-declared string values (flex-start, space-between, etc), these will be provided as suggestions in your IDE (assuming you're using typescript).

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

Theming

You can also create a space scale within your theme, which is then accessible from the columnGap, rowGap and gap props.

This can be defined as any valid scale type and the values will be shown as suggestions in your IDE.

/* simple array-based scale */
export const theme = {
  space: [2, 4, 8, 12, 16, 24, 32, 48, 64, 72]
}

/* simple object-based scale */
export const theme = {
  space: {
    extraSmall: '0.25rem',
    small: '0.5rem',
    medium: '1rem',
    large: '2rem',
    extraLarge: '4rem'
  }
}

Types

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

interface GridProps {
  grid?: StyleProp<Property.Grid>
  gridTemplate?: StyleProp<Property.GridTemplate>
  gridTemplateColumns?: StyleProp<Property.GridTemplateColumns>
  gridTemplateRows?: StyleProp<Property.GridTemplateRows>
  gridTemplateAreas?: StyleProp<Property.GridTemplateAreas>
  columnGap?: StyleProp<Property.ColumnGap<string | 0 | number> | ThemeValue<'space'>>
  rowGap?: StyleProp<Property.RowGap<string | 0 | number> | ThemeValue<'space'>>
  gap?: StyleProp<Property.Gap<string | 0 | number> | ThemeValue<'space'>>
  gridJustifyItems?: StyleProp<Property.JustifyItems>
  gridAlignItems?: StyleProp<Property.AlignItems>
  gridPlaceItems?: StyleProp<Property.PlaceItems>
  gridJustifyContent?: StyleProp<Property.JustifyContent>
  gridAlignContent?: StyleProp<Property.AlignContent>
  gridPlaceContent?: StyleProp<Property.PlaceContent>
  gridAutoColumns?: StyleProp<Property.GridAutoColumns>
  gridAutoRows?: StyleProp<Property.GridAutoRows>
  gridAutoFlow?: StyleProp<Property.GridAutoFlow>

  // Child Props
  gridColumn?: StyleProp<Property.GridColumn>
  gridRow?: StyleProp<Property.GridRow>
  gridArea?: StyleProp<Property.GridArea>
  gridRowStart?: StyleProp<Property.GridRowStart>
  gridRowEnd?: StyleProp<Property.GridRowEnd>
  gridColumnStart?: StyleProp<Property.GridColumnStart>
  gridColumnEnd?: StyleProp<Property.GridColumnEnd>
  alignSelf?: StyleProp<Property.AlignSelf>
  justifySelf?: StyleProp<Property.JustifySelf>
  placeSelf?: StyleProp<Property.PlaceSelf>
}

API

The grid function allows for a number of props to be passed to your component from directly within your jsx / tsx. Select props also have shorthand aliases that can be used for a more concise syntax.

Prop	CSS Property	Theme Scale
grid	grid
gridTemplate	grid-template
gridTemplateColumns	grid-template-columns
gridTemplateRows	grid-template-rows
gridTemplateAreas	grid-template-areas
columnGap	column-gap	space
rowGap	row-gap	space
gap	gap	space
gridJustifyItems	grid-justify-items
gridAlignItems	grid-align-items
gridPlaceItems	grid-place-items
gridJustifyContent	grid-justify-content
gridAlignContent	grid-align-content
gridPlaceContent	grid-place-content
gridAutoColumns	grid-auto-columns
gridAutoRows	grid-auto-rows
gridAutoFlow	grid-auto-flow
gridColumn	grid-column
gridRow	grid-row
gridArea	grid-area
gridRowStart	grid-row-start
gridRowEnd	grid-row-end
gridColumnStart	grid-column-start
gridColumnEnd	grid-column-end
alignSelf	align-self
justifySelf	justify-self
placeSelf	place-self

To use shorthand aliases with grid properties, check out extendedGrid.

Examples

/* using plain CSS values */
<Component grid='auto-flow dense / 40px 40px 1fr' />


/* with a theme scale defined */
/* `theme.space[1]` */
<Component rowGap={1} />

/* `theme.space.small` */
<Component columnGap='small' />


/* based on a conditional */
<Component justifyContent={isActive ? 'flex-start' : 'flex-end'} />


/* using responsive styles */
<Component gridAutoFlow={['column dense', 'column', null, 'row']} />

<Component gridColumn={{ _: '1 / span 3', sm: '1 / span 4', lg: '1 / span 6' }} />


/* using responsive styles with theme scales */
<Component gap={[0, 1, null, 2]} />

<Component rowGap={{_: 'small', sm: 'medium' xl: 'large'}} />