Repository files navigation

Responsive React grid system built withstyled-system, with support forstyled-components andemotion (previously calledgrid-styled)

https://rebassjs.org/grid

npm i @rebass/grid

importReactfrom'react'import{Flex,Box}from'@rebass/grid'constApp=()=>(<Flex><Boxwidth={1/2}px={2}>      Half width</Box><Boxwidth={1/2}px={2}>      Half width</Box></Flex>)

Or for emotion , import@rebass/grid/emotion (uses v10@emotion/styled)

import{Flex,Box}from'@rebass/grid/emotion'

The Box component handles width, margin and padding.

// Different widths at different breakpoints<Boxwidth={[1/2,1/3,1/4,1/6]}/>// Fixed pixel width<Boxwidth={256}/>// CSS value width<Boxwidth='40em'/>

// Padding<Boxp={2}/>// Padding top<Boxpt={2}/>// Padding bottom<Boxpb={2}/>// Padding left<Boxpl={2}/>// Padding right<Boxpr={2}/>// x-axis padding (left and right)<Boxpx={2}/>// y-axis padding (top and bottom)<Boxpy={2}/>

// Margin<Boxm={2}/>// Margin top<Boxmt={2}/>// Margin bottom<Boxmb={2}/>// Margin left<Boxml={2}/>// Margin right<Boxmr={2}/>// x-axis margin (left and right)<Boxmx={2}/>// y-axis margin (top and bottom)<Boxmy={2}/>

// margin auto<Boxm='auto'/>// negative margins<Boxmx={-2}/>

All @rebass/grid components usestyled-system for style props,which pick up values from atheme and allow for responsive styles to be passed asarray values.

Sets width, where numbers0-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 forresponsive styles.

Both margin and padding props accept numbers, strings, and arrays as values.Using a number from0-8 (i.e. an index oftheme.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 forresponsive 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

Sets theflex property.

<Boxflex='1 1 auto'/>

Sets theorder property.

<Boxorder={2}/>

Sets thealign-self property.

<BoxalignSelf='flex-end'/>

Pass styles to styled-components or emotion.This is useful as an escape hatch for one-off stylesor as a way to extend Rebass Grid components.

<Boxbg='blue'css={{borderRadius:'4px'}}/>

The Flex component extends the Box component and sets display flex.

importReactfrom'react'import{Flex,Box}from'@rebass/grid'constApp=props=><Flex><Box>Flex</Box><Box>Box</Box></Flex>

In addition to the Box component props,Flex also includes the following:

• alignItems (string|array) setsalign-items
• justifyContent (string|array) setsjustify-content
• flexDirection (string|array) setsflex-direction
• flexWrap (string|array) setsflex-wrap: wrap

Rebass Grid 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-widthmedia query from that breakpoint and up.

// 100% below the smallest breakpoint,// 50% from the next breakpoint and up,// and 25% from the next breakpoint and up<Boxwidth={[1,1/2,1/4]}/>// responsive margin<Boxm={[1,2,3,4]}/>// responsive padding<Boxp={[1,2,3,4]}/>

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

importReactfrom'react'import{Flex}from'@rebass/grid'constInlineFlex=props=><Flex{...props}css={{display:'inline-flex'}}/>

// styled-components exampleimportstyledfrom'styled-components'import{Flex}from'@rebass/grid'constInlineFlex=styled(Flex)`  display: inline-flex;`

importReactfrom'react'import{Box}from'@rebass/grid'constContainer=props=><Box{...props}mx='auto'css={{maxWidth:'1024px'}}/>

// styled-components exampleimportstyledfrom'styled-components'import{Box}from'@rebass/grid'constContainer=styled(Box)`  max-width: 1024px;`Container.defaultProps={mx:'auto'}

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

// ExampleimportReactfrom'react'import{Flex,Box}from'@rebass/grid'constRow=props=>(<Flex{...props}mx={-3}/>)constColumn=props=>(<Box{...props}px={3}flex='1 1 auto'/>)

Rebass Grid is intended for use with styled-components v4.To change the underlying HTML element, use the styled-componentsas prop.

<Boxas='header'/>

Note: Previous versions of grid-styled supported anis prop, which has been deprecated in favor of the styled-componentsas prop.

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

importReactfrom'react'import{ThemeProvider}from'styled-components'import{Box}from'@rebass/grid'consttheme={space:[0,6,12,18,24],breakpoints:['32em','48em','64em']}constApp=()=>(<ThemeProvidertheme={theme}><div><Boxwidth={[1,1/2,1/4]}px={2}>Box with custom spacing scale and breakpoints</Box></div></ThemeProvider>)

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.

Rebass Grid components' margin and padding props use a 4 step spacing scale to helpkeep 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.

Rebass Grid also works with the optionalRebass Space package.

importReactfrom'react'import{Flex,Box}from'@rebass/grid'importSpacefrom'@rebass/space'constApp=()=>(<Flex><Spacemx={3}><h1>Hello</h1><Box>Beep</Box></Space></Flex>)

• Rebass Space
• styled-system
• @rebass/components
• Rebass
• styled-components
• emotion

MIT License