react-grid

BX Grid System for React.

Installation (for standard modern project)

yarn add @bx-design/react-grid

Or

npm install @bx-design/react-grid

Example usage

First add bx-grid.min.css for styles.

For CRA add in index, for Next.js add in _app

import '@bx-design/react-grid/dist/styles/bx-grid.min.css'

Using grid

import { Container, Row, Col } from '@bx-design/react-grid'

const SomeComponent = () => {
  return (
    <Container>
      <Row>
         <Col col='12'>
           <h1>BX Grid</h1>
         </Col>
      </Row>
    </Container>
  )
}

Props

Container

Prop	Type	Default	Breakpoint
fluid	boolean	false	all
sm	boolean	undefined	sm
md	boolean	undefined	md
lg	boolean	undefined	lg
xl	boolean	undefined	xl
xxl	boolean	undefined	xxl

Row

Prop	Type	Default	Breakpoint
rowCols	boolean, "auto", "1", "2", "3", "4", "5", "6"	false	all
rowColsSm	boolean, "auto", "1", "2", "3", "4", "5", "6"	false	sm
rowColsMd	boolean, "auto", "1", "2", "3", "4", "5", "6"	false	md
rowColsLg	boolean, "auto", "1", "2", "3", "4", "5", "6"	false	lg
rowColsXl	boolean, "auto", "1", "2", "3", "4", "5", "6"	false	xl
rowColsXxl	boolean, "auto", "1", "2", "3", "4", "5", "6"	false	xxl
justifyContent	"start", "end", "center", "between", "around", "evenly"	undefined	all
justifyContentSm	"start", "end", "center", "between", "around", "evenly"	undefined	sm
justifyContentMd	"start", "end", "center", "between", "around", "evenly"	undefined	md
justifyContentLg	"start", "end", "center", "between", "around", "evenly"	undefined	lg
justifyContentXl	"start", "end", "center", "between", "around", "evenly"	undefined	xl
justifyContentXxl	"start", "end", "center", "between", "around", "evenly"	undefined	xxl
alignItems	"start", "end", "center", "baseline", "stretch"	undefined	all
alignItemsSm	"start", "end", "center", "baseline", "stretch"	undefined	sm
alignItemsMd	"start", "end", "center", "baseline", "stretch"	undefined	md
alignItemsLg	"start", "end", "center", "baseline", "stretch"	undefined	lg
alignItemsXl	"start", "end", "center", "baseline", "stretch"	undefined	xl
alignItemsXxl	"start", "end", "center", "baseline", "stretch"	undefined	xxl
m	"auto", "1", "2", "3", "4", "5", "0"	undefined	all
mSm	"auto", "1", "2", "3", "4", "5", "0"	undefined	sm
mMd	"auto", "1", "2", "3", "4", "5", "0"	undefined	md
mLg	"auto", "1", "2", "3", "4", "5", "0"	undefined	lg
mXl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xl
mXxl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xxl
mx	"auto", "1", "2", "3", "4", "5", "0"	undefined	all
mxSm	"auto", "1", "2", "3", "4", "5", "0"	undefined	sm
mxMd	"auto", "1", "2", "3", "4", "5", "0"	undefined	md
mxLg	"auto", "1", "2", "3", "4", "5", "0"	undefined	lg
mxXl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xl
mxXxl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xxl
my	"auto", "1", "2", "3", "4", "5", "0"	undefined	all
mySm	"auto", "1", "2", "3", "4", "5", "0"	undefined	sm
myMd	"auto", "1", "2", "3", "4", "5", "0"	undefined	md
myLg	"auto", "1", "2", "3", "4", "5", "0"	undefined	lg
myXl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xl
myXxl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xxl
mb	"auto", "1", "2", "3", "4", "5", "0"	undefined	all
mbSm	"auto", "1", "2", "3", "4", "5", "0"	undefined	sm
mbMd	"auto", "1", "2", "3", "4", "5", "0"	undefined	md
mbLg	"auto", "1", "2", "3", "4", "5", "0"	undefined	lg
mbXl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xl
mbXxl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xxl
mt	"auto", "1", "2", "3", "4", "5", "0"	undefined	all
mtSm	"auto", "1", "2", "3", "4", "5", "0"	undefined	sm
mtMd	"auto", "1", "2", "3", "4", "5", "0"	undefined	md
mtLg	"auto", "1", "2", "3", "4", "5", "0"	undefined	lg
mtXl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xl
mtXxl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xxl
ms	"auto", "1", "2", "3", "4", "5", "0"	undefined	all
msSm	"auto", "1", "2", "3", "4", "5", "0"	undefined	sm
msMd	"auto", "1", "2", "3", "4", "5", "0"	undefined	md
msLg	"auto", "1", "2", "3", "4", "5", "0"	undefined	lg
msXl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xl
msXxl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xxl
me	"auto", "1", "2", "3", "4", "5", "0"	undefined	all
meSm	"auto", "1", "2", "3", "4", "5", "0"	undefined	sm
meMd	"auto", "1", "2", "3", "4", "5", "0"	undefined	md
meLg	"auto", "1", "2", "3", "4", "5", "0"	undefined	lg
meXl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xl
meXxl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xxl
g	"1", "2", "3", "4", "5", "0"	undefined	all
gSm	"1", "2", "3", "4", "5", "0"	undefined	sm
gMd	"1", "2", "3", "4", "5", "0"	undefined	md
gLg	"1", "2", "3", "4", "5", "0"	undefined	lg
gXl	"1", "2", "3", "4", "5", "0"	undefined	xl
gXxl	"1", "2", "3", "4", "5", "0"	undefined	xxl
gx	"1", "2", "3", "4", "5", "0"	undefined	all
gxSm	"1", "2", "3", "4", "5", "0"	undefined	sm
gxMd	"1", "2", "3", "4", "5", "0"	undefined	md
gxLg	"1", "2", "3", "4", "5", "0"	undefined	lg
gxXl	"1", "2", "3", "4", "5", "0"	undefined	xl
gxXxl	"1", "2", "3", "4", "5", "0"	undefined	xxl
gy	"1", "2", "3", "4", "5", "0"	undefined	all
gySm	"1", "2", "3", "4", "5", "0"	undefined	sm
gyMd	"1", "2", "3", "4", "5", "0"	undefined	md
gyLg	"1", "2", "3", "4", "5", "0"	undefined	lg
gyXl	"1", "2", "3", "4", "5", "0"	undefined	xl
gyXxl	"1", "2", "3", "4", "5", "0"	undefined	xxl
p	"auto", "1", "2", "3", "4", "5", "0"	undefined	all
pSm	"auto", "1", "2", "3", "4", "5", "0"	undefined	sm
pMd	"auto", "1", "2", "3", "4", "5", "0"	undefined	md
pLg	"auto", "1", "2", "3", "4", "5", "0"	undefined	lg
pXl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xl
pXxl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xxl
px	"auto", "1", "2", "3", "4", "5", "0"	undefined	all
pxSm	"auto", "1", "2", "3", "4", "5", "0"	undefined	sm
pxMd	"auto", "1", "2", "3", "4", "5", "0"	undefined	md
pxLg	"auto", "1", "2", "3", "4", "5", "0"	undefined	lg
pxXl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xl
pxXxl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xxl
py	"auto", "1", "2", "3", "4", "5", "0"	undefined	all
pySm	"auto", "1", "2", "3", "4", "5", "0"	undefined	sm
pyMd	"auto", "1", "2", "3", "4", "5", "0"	undefined	md
pyLg	"auto", "1", "2", "3", "4", "5", "0"	undefined	lg
pyXl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xl
pyXxl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xxl
pb	"auto", "1", "2", "3", "4", "5", "0"	undefined	all
pbSm	"auto", "1", "2", "3", "4", "5", "0"	undefined	sm
pbMd	"auto", "1", "2", "3", "4", "5", "0"	undefined	md
pbLg	"auto", "1", "2", "3", "4", "5", "0"	undefined	lg
pbXl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xl
pbXxl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xxl
pt	"auto", "1", "2", "3", "4", "5", "0"	undefined	all
ptSm	"auto", "1", "2", "3", "4", "5", "0"	undefined	sm
ptMd	"auto", "1", "2", "3", "4", "5", "0"	undefined	md
ptLg	"auto", "1", "2", "3", "4", "5", "0"	undefined	lg
ptXl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xl
ptXxl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xxl
ps	"auto", "1", "2", "3", "4", "5", "0"	undefined	all
psSm	"auto", "1", "2", "3", "4", "5", "0"	undefined	sm
psMd	"auto", "1", "2", "3", "4", "5", "0"	undefined	md
psLg	"auto", "1", "2", "3", "4", "5", "0"	undefined	lg
psXl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xl
psXxl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xxl
pe	"auto", "1", "2", "3", "4", "5", "0"	undefined	all
peSm	"auto", "1", "2", "3", "4", "5", "0"	undefined	sm
peMd	"auto", "1", "2", "3", "4", "5", "0"	undefined	md
peLg	"auto", "1", "2", "3", "4", "5", "0"	undefined	lg
peXl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xl
peXxl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xxl

Col

Prop	Type	Default	Breakpoint
col	true , 'auto' , '1' , '2' , '3' , '4' , '5' , '6' , '7' , '8' , '9' , '10' , '11' , '12'	all
colSm	true , 'auto' , '1' , '2' , '3' , '4' , '5' , '6' , '7' , '8' , '9' , '10' , '11' , '12'	all
colMd	true , 'auto' , '1' , '2' , '3' , '4' , '5' , '6' , '7' , '8' , '9' , '10' , '11' , '12'	all
colLg	true , 'auto' , '1' , '2' , '3' , '4' , '5' , '6' , '7' , '8' , '9' , '10' , '11' , '12'	all
colXl	true , 'auto' , '1' , '2' , '3' , '4' , '5' , '6' , '7' , '8' , '9' , '10' , '11' , '12'	all
colXll	true , 'auto' , '1' , '2' , '3' , '4' , '5' , '6' , '7' , '8' , '9' , '10' , '11' , '12'	all
hidden	boolean	undefined	all
hiddenSm	boolean	undefined	sm
hiddenMd	boolean	undefined	md
hiddenLg	boolean	undefined	lg
hiddenXl	boolean	undefined	xl
hiddenXll	boolean	undefined	xxl
visible	boolean	undefined	all
visibleSm	boolean	undefined	sm
visibleMd	boolean	undefined	md
visibleLg	boolean	undefined	lg
visibleXl	boolean	undefined	xl
visibleXll	boolean	undefined	xxl
order	'first' , '0' , '1' , '2' , '3' , '4' , '5' , 'last'	undefined	all
orderSm	'first' , '0' , '1' , '2' , '3' , '4' , '5' , 'last'	undefined	sm
orderMd	'first' , '0' , '1' , '2' , '3' , '4' , '5' , 'last'	undefined	md
orderLg	'first' , '0' , '1' , '2' , '3' , '4' , '5' , 'last'	undefined	lg
orderXl	'first' , '0' , '1' , '2' , '3' , '4' , '5' , 'last'	undefined	xl
orderXll	'first' , '0' , '1' , '2' , '3' , '4' , '5' , 'last'	undefined	xxl
offset	'1' , '2' , '3' , '4' , '5' , '6' , '7' , '8' , '9' , '10' , '11'	undefined	all
offsetSm	'1' , '2' , '3' , '4' , '5' , '6' , '7' , '8' , '9' , '10' , '11'	undefined	sm
offsetMd	'1' , '2' , '3' , '4' , '5' , '6' , '7' , '8' , '9' , '10' , '11'	undefined	md
offsetLg	'1' , '2' , '3' , '4' , '5' , '6' , '7' , '8' , '9' , '10' , '11'	undefined	lg
offsetXl	'1' , '2' , '3' , '4' , '5' , '6' , '7' , '8' , '9' , '10' , '11'	undefined	xl
offsetXll	'1' , '2' , '3' , '4' , '5' , '6' , '7' , '8' , '9' , '10' , '11'	undefined	xxl
m	"auto", "1", "2", "3", "4", "5", "0"	undefined	all
mSm	"auto", "1", "2", "3", "4", "5", "0"	undefined	sm
mMd	"auto", "1", "2", "3", "4", "5", "0"	undefined	md
mLg	"auto", "1", "2", "3", "4", "5", "0"	undefined	lg
mXl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xl
mXxl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xxl
mx	"auto", "1", "2", "3", "4", "5", "0"	undefined	all
mxSm	"auto", "1", "2", "3", "4", "5", "0"	undefined	sm
mxMd	"auto", "1", "2", "3", "4", "5", "0"	undefined	md
mxLg	"auto", "1", "2", "3", "4", "5", "0"	undefined	lg
mxXl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xl
mxXxl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xxl
my	"auto", "1", "2", "3", "4", "5", "0"	undefined	all
mySm	"auto", "1", "2", "3", "4", "5", "0"	undefined	sm
myMd	"auto", "1", "2", "3", "4", "5", "0"	undefined	md
myLg	"auto", "1", "2", "3", "4", "5", "0"	undefined	lg
myXl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xl
myXxl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xxl
mb	"auto", "1", "2", "3", "4", "5", "0"	undefined	all
mbSm	"auto", "1", "2", "3", "4", "5", "0"	undefined	sm
mbMd	"auto", "1", "2", "3", "4", "5", "0"	undefined	md
mbLg	"auto", "1", "2", "3", "4", "5", "0"	undefined	lg
mbXl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xl
mbXxl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xxl
mt	"auto", "1", "2", "3", "4", "5", "0"	undefined	all
mtSm	"auto", "1", "2", "3", "4", "5", "0"	undefined	sm
mtMd	"auto", "1", "2", "3", "4", "5", "0"	undefined	md
mtLg	"auto", "1", "2", "3", "4", "5", "0"	undefined	lg
mtXl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xl
mtXxl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xxl
ms	"auto", "1", "2", "3", "4", "5", "0"	undefined	all
msSm	"auto", "1", "2", "3", "4", "5", "0"	undefined	sm
msMd	"auto", "1", "2", "3", "4", "5", "0"	undefined	md
msLg	"auto", "1", "2", "3", "4", "5", "0"	undefined	lg
msXl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xl
msXxl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xxl
me	"auto", "1", "2", "3", "4", "5", "0"	undefined	all
meSm	"auto", "1", "2", "3", "4", "5", "0"	undefined	sm
meMd	"auto", "1", "2", "3", "4", "5", "0"	undefined	md
meLg	"auto", "1", "2", "3", "4", "5", "0"	undefined	lg
meXl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xl
meXxl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xxl
p	"auto", "1", "2", "3", "4", "5", "0"	undefined	all
pSm	"auto", "1", "2", "3", "4", "5", "0"	undefined	sm
pMd	"auto", "1", "2", "3", "4", "5", "0"	undefined	md
pLg	"auto", "1", "2", "3", "4", "5", "0"	undefined	lg
pXl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xl
pXxl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xxl
px	"auto", "1", "2", "3", "4", "5", "0"	undefined	all
pxSm	"auto", "1", "2", "3", "4", "5", "0"	undefined	sm
pxMd	"auto", "1", "2", "3", "4", "5", "0"	undefined	md
pxLg	"auto", "1", "2", "3", "4", "5", "0"	undefined	lg
pxXl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xl
pxXxl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xxl
py	"auto", "1", "2", "3", "4", "5", "0"	undefined	all
pySm	"auto", "1", "2", "3", "4", "5", "0"	undefined	sm
pyMd	"auto", "1", "2", "3", "4", "5", "0"	undefined	md
pyLg	"auto", "1", "2", "3", "4", "5", "0"	undefined	lg
pyXl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xl
pyXxl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xxl
pb	"auto", "1", "2", "3", "4", "5", "0"	undefined	all
pbSm	"auto", "1", "2", "3", "4", "5", "0"	undefined	sm
pbMd	"auto", "1", "2", "3", "4", "5", "0"	undefined	md
pbLg	"auto", "1", "2", "3", "4", "5", "0"	undefined	lg
pbXl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xl
pbXxl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xxl
pt	"auto", "1", "2", "3", "4", "5", "0"	undefined	all
ptSm	"auto", "1", "2", "3", "4", "5", "0"	undefined	sm
ptMd	"auto", "1", "2", "3", "4", "5", "0"	undefined	md
ptLg	"auto", "1", "2", "3", "4", "5", "0"	undefined	lg
ptXl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xl
ptXxl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xxl
ps	"auto", "1", "2", "3", "4", "5", "0"	undefined	all
psSm	"auto", "1", "2", "3", "4", "5", "0"	undefined	sm
psMd	"auto", "1", "2", "3", "4", "5", "0"	undefined	md
psLg	"auto", "1", "2", "3", "4", "5", "0"	undefined	lg
psXl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xl
psXxl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xxl
pe	"auto", "1", "2", "3", "4", "5", "0"	undefined	all
peSm	"auto", "1", "2", "3", "4", "5", "0"	undefined	sm
peMd	"auto", "1", "2", "3", "4", "5", "0"	undefined	md
peLg	"auto", "1", "2", "3", "4", "5", "0"	undefined	lg
peXl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xl
peXxl	"auto", "1", "2", "3", "4", "5", "0"	undefined	xxl

Name		Name	Last commit message	Last commit date
Latest commit History 19 Commits
.github		.github
src		src
.eslintignore		.eslintignore
.eslintrc		.eslintrc
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc		.prettierrc
LICENSE		LICENSE
README.md		README.md
jest-setup.ts		jest-setup.ts
jest.config.js		jest.config.js
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json
tsconfig.test.json		tsconfig.test.json
yarn.lock		yarn.lock

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

react-grid

Installation (for standard modern project)

Example usage

Props

Container

Row

Col

About

Uh oh!

Releases

Languages

License

bx-design/react-grid

Folders and files

Latest commit

History

Repository files navigation

react-grid

Installation (for standard modern project)

Example usage

Props

Container

Row

Col

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Languages