Grid Styled

Responsive React grid system built with styled-system, with support for styled-components and emotion

https://jxnblk.com/grid-styled

Getting Started

npm i grid-styled

import React from 'react'
import { Flex, Box } from 'grid-styled'

const App = () => (
  
    
      Half width
    
    
      Half width
    
  
)

Or for emotion, import grid-styled/emotion

import { Flex, Box } from 'grid-styled/emotion'

// Different widths at different breakpoints


// Fixed pixel width


// CSS value width

// Padding


// Padding top


// Padding bottom


// Padding left


// Padding right


// x-axis padding (left and right)


// y-axis padding (top and bottom)

// Margin


// Margin top


// Margin bottom


// Margin left


// Margin right


// x-axis margin (left and right)


// y-axis margin (top and bottom)

// margin auto


// negative margins

``

The Box component handles width, margin and padding.

Props

All grid-styled components use styled-system for style props, which pick up values from a theme and allow for responsive styles to be passed as array values.

width (number|string|array)

Sets width, where numbers 0-1 are percentage values, larger numbers are pixel values, and strings are raw CSS values with units. Pass an array to set different widths at different breakpoints for responsive styles.

Margin and Padding Props

Both margin and padding props accept numbers, strings, and arrays as values. Using a number from 0-8 (i.e. an index of theme.space) will reference a step on the spacing scale. Larger numbers are converted to pixel values. Negative Numbers can be used to set negative margins and compensate for grid gutters. Strings are passed directly for other valid CSS values.

Use array values to set different margin or padding values per breakpoint for responsive styles.

Margin and padding props follow a shorthand syntax for specifying direction.

• m: margin
• mt: margin-top
• mr: margin-right
• mb: margin-bottom
• ml: margin-left
• mx: margin-left and margin-right
• my: margin-top and margin-bottom
• p: padding
• pt: padding-top
• pr: padding-right
• pb: padding-bottom
• pl: padding-left
• px: padding-left and padding-right
• py: padding-top and padding-bottom

flex (string|array)

Sets the flex property.

order (number|string|array)

Sets the order property.

alignSelf (string|array)

Sets the align-self property.

css (string|object)

Pass styles to styled-components or emotion.

``

The Flex component extends the Box component and sets display flex. It also includes the following props:

• alignItems (string|array) sets align-items
• justifyContent (string|array) sets justify-content
• flexDirection (string|array) sets flex-direction
• flexWrap (string|array) sets flex-wrap: wrap

Responsive Styles

Most props accept arrays as values for mobile-first responsive styles, where the first value is for all breakpoints, then each value after is for a min-width media query from that breakpoint and up. The Box component uses styled-system for these props.

// 100% below the smallest breakpoint,
// 50% from the next breakpoint and up,
// and 25% from the next breakpoint and up


// responsive margin


// responsive padding

Extending Components

Component can be extended with React or using styled-components or emotion.

InlineFlex

import React from 'react'
import { Flex } from 'grid-styled'

const InlineFlex = props =>
  

// styled-components example
import styled from 'styled-components'
import { Flex } from 'grid-styled'

const InlineFlex = styled(Flex)`
  display: inline-flex;
`

Max-Width Container

import React from 'react'
import { Box } from 'grid-styled'

const Container = props =>
  

// styled-components example
import styled from 'styled-components'
import { Box } from 'grid-styled'

const Container = styled(Box)`
  max-width: 1024px;
`
Container.defaultProps = {
  mx: 'auto'
}

Auto Grid

This example creates components for a grid with set gutters where the columns expand to fill in the space.

// Example
import React from 'react'
import { Flex, Box } from 'grid-styled'

const Row = props => (
  
)

const Column = props => (
  
)

Changing the HTML element

Grid Styled components use the is prop from system-components to change the underlying HTML element.

Theming

Grid Styled uses smart defaults, but to customize the values, use the ThemeProvider component from styled-components or emotion.

import React from 'react'
import { ThemeProvider } from 'styled-components'
import { Box } from 'grid-styled'

const theme = {
  space: [ 0, 6, 12, 18, 24 ],
  breakpoints: [ '32em', '48em', '64em' ]
}

const App = () => (
  
    <div>
      Box with custom spacing scale and breakpoints
    </div>
  
)

Breakpoints

The Flex and Box components use a mobile-first responsive approach, where any value set works from that breakpoint and wider. Breakpoints are hard-coded to the following min-widths: 40em, 52em, 64em.

To customize, provide an array of string values that will be converted to media queries.

Spacing Scale

Grid Styled components' margin and padding props use a 4 step spacing scale to help keep things aligned and keep layouts consistent.

The default scale is based on an 8px/powers-of-two grid: [ 0, 4, 8, 16, 32, 64, 128, 256, 512 ], which helps keep spacing consistent and elements aligned even when nesting components.

Styled Space

Grid Styled also works with the optional styled-space package.

import React from 'react'
import { Flex, Box } from 'grid-styled'
import Space from 'styled-space'

const App = () => (
  
    
      <h1>Hello</h1>
      Beep
    
  
)

Related

• styled-space
• styled-system
• system-components
• Rebass
• styled-components
• emotion

MIT License