Inspired by Bootstrap, glamorous-grid
exposes several React components to make a versatile and customizable flexbox grid system.
npm install glamorous-grid
import { Container, Row, Col } from 'glamorous-grid' function MyComponent(props) => { return ( <Container> <Row> <Col> Hello world! </Col> </Row> </Container> ) }
glamorous-grid
exports three components: Container
, Row
, and Col
.
Container
helps center your content. By default, this will be centered in a fixed width that changes per breakpoint. Use the prop fluid
to have the container span its full width.Row
represents a group of content. It does not necessarily represent a horizontal group of content, since columns can wrap, but often times it does. The only direct children of a Row
can be one or more Col
.Col
is where all your content goes. You can specify its width to line up to a grid.<Container> <Row> <Col>Column 1 of 3</Col> <Col>Column 2 of 3</Col> <Col>Column 3 of 3</Col> </Row> </Container>
The default breakpoints are xs
, sm
, md
, lg
, and xl
. All props can take either a primitive value, such as 20px
or 1em
, or an object mapping primitive values to a specific breakpoint.
<Container> <Row> <Col span={{ xs: 2/12, lg: 6/12 }}>span 2, lg 6</Col> <Col span={{ xs: 5/12, lg: 3/12 }}>span 5, lg 3</Col> <Col span={{ xs: 5/12, lg: 3/12 }}>span 5, lg 3</Col> </Row> </Container>
If you specify span
for only md
, but not for any breakpoint below, column width will be 100% below the md
breakpoint.
<Container> <Row> <Col span={{ md: 4/12 }}>md 4</Col> <Col span={{ md: 4/12 }}>md 4</Col> <Col span={{ md: 4/12 }}>md 4</Col> </Row> </Container>
Use the auto
prop on Col
for variable content width.
<Container> <Row justifyContent={{ md: 'center' }} mb={12}> <Col span={{ lg: 2/12 }}>1 of 3</Col> <Col span={12/12} auto={{ md: true }}>Just some variable width content</Col> <Col span={{ lg: 2/12 }}>3 of 3</Col> </Row> <Row> <Col>1 of 3</Col> <Col span={12/12} auto={{ md: true }}>Just some variable width content</Col> <Col span={{ lg: 2/12 }}>3 of 3</Col> </Row> </Container>
The props alignItems
(on Row) and alignSelf
(on Col) can be used for adjusting the position of columns:
import { Container, Row, Col } from 'glamorous-grid' const RowSpaced = glamorous(Row)({ minHeight: 100, background: 'rgb(248, 248, 248)' }) <Container> <RowSpaced> <Col>Default Alignment Stretch, 1</Col> <Col>2</Col> <Col>3</Col> </RowSpaced> <RowSpaced alignItems={{ md: 'start' }}> <Col>1 of 3</Col> <Col>2 of 3</Col> <Col>3 of 3</Col> </RowSpaced> <RowSpaced alignItems={{ md: 'center' }} mt={16}> <Col>1 of 3</Col> <Col>2 of 3</Col> <Col>3 of 3</Col> </RowSpaced> <RowSpaced alignItems={{ md: 'end' }} mt={16}> <Col>1 of 3</Col> <Col>2 of 3</Col> <Col>3 of 3</Col> </RowSpaced> <RowSpaced mt={16}> <Col alignSelf={{ md: 'start' }}>1 of 3</Col> <Col alignSelf={{ md: 'center' }}>2 of 3</Col> <Col alignSelf={{ md: 'end' }}>3 of 3</Col> </RowSpaced> </Container>
The Row
prop justifyContent
can be used to adjust the horizontal alignment of columns.
<Container> <Row justifyContent="start"> <Col span={4/12}>1 of 2 columns</Col> <Col span={4/12}>2 of 2 columns</Col> </Row> <Row justifyContent="center"> <Col span={4/12}>1 of 2 columns</Col> <Col span={4/12}>2 of 2 columns</Col> </Row> <Row justifyContent="end"> <Col span={4/12}>1 of 2 columns</Col> <Col span={4/12}>2 of 2 columns</Col> </Row> <Row justifyContent="around"> <Col span={4/12}>1 of 2 columns</Col> <Col span={4/12}>2 of 2 columns</Col> </Row> <Row justifyContent="between"> <Col span={4/12}>1 of 2 columns</Col> <Col span={4/12}>2 of 2 columns</Col> </Row> </Container>
The grid system is based off of following default theme:
{ grid_breakpoints: { xs: 0, sm: 576, md: 768, lg: 992, xl: 1200 }, max_container_width: { sm: 540, md: 720, lg: 960, xl: 1140 }, column_gutter: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24 }, outer_gutter: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24 } }
You can override the default theme by using glamorous' ThemeProvider:
<ThemeProvider theme={{ grid: { grid_breakpoints: { xs: 0, sm: 576, md: 768, lg: 992, xl: 1200 }, max_container_width: { sm: 540, md: 720, lg: 960, xl: 1140 }, column_gutter: { xs: 6, sm: 6, md: 6, lg: 24, xl: 24 }, outer_gutter: { xs: 0, sm: 0, md: 0, lg: 0, xl: 0 } } }} > <Container fluid> <Row> <Col span={{ sm: 1/3 }} style={{ border: 'none' }}> <div style={{ border: '1px solid #eee' }}>6px col gutters on mobile</div> </Col> <Col span={{ sm: 1/3 }} style={{ border: 'none' }}> <div style={{ border: '1px solid #eee' }}>0px outer gutters</div> </Col> <Col span={{ sm: 1/3 }} style={{ border: 'none' }}> <div style={{ border: '1px solid #eee' }}>24px col gutters for lg+</div> </Col> </Row> </Container> </ThemeProvider>