Introduction

Inspired by Bootstrap, glamorous-grid exposes several React components to make a versatile and customizable flexbox grid system.

Core Features

• Infinite columns. Supports any number of columns. 6 column grid system, 12, 200, etc.
• Default breakpoints match Bootstrap, but can be customized via the theme. You can also have any number of breakpoints, not just the default 5.
• Extra utility props for offsets, alignment, and margin/padding spacing.

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.

Example

<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.

Example

<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.

Example

<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.

Example

<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:

Example

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.

Example

<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:

Example

<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>