@thumbtack/tp-ui-react-grid v0.2.5

package: '@thumbtack/tp-ui-react-grid' kit: layout/grid.yaml platform: react

url: /api/components/layout/grid/react/

import Alert from './../../../../www/src/components/alert';

Examples

Basic grid

<Grid>
    <GridColumn base={12} aboveSmall={4}>
        <div style={{ border: '1px solid red', width: '100%', height: '100px' }} />
    </GridColumn>
    <GridColumn base={12} aboveSmall={4}>
        <div style={{ border: '1px solid red', width: '100%', height: '100px' }} />
    </GridColumn>
    <GridColumn base={12} aboveSmall={4}>
        <div style={{ border: '1px solid red', width: '100%', height: '100px' }} />
    </GridColumn>
</Grid>

Wide gutters

<Grid gutter="wide">
    <GridColumn base={4}>
        <div style={{ border: '1px solid red', width: '100%', height: '100px' }} />
    </GridColumn>
    <GridColumn base={4}>
        <div style={{ border: '1px solid red', width: '100%', height: '100px' }} />
    </GridColumn>
    <GridColumn base={4}>
        <div style={{ border: '1px solid red', width: '100%', height: '100px' }} />
    </GridColumn>
</Grid>

No gutters

<Grid gutter="flush">
    <GridColumn base={4}>
        <div style={{ border: '1px solid red', width: '100%', height: '100px' }} />
    </GridColumn>
    <GridColumn base={4}>
        <div style={{ border: '1px solid red', width: '100%', height: '100px' }} />
    </GridColumn>
    <GridColumn base={4}>
        <div style={{ border: '1px solid red', width: '100%', height: '100px' }} />
    </GridColumn>
</Grid>

Responsive at all breakpoints

<Grid>
    <GridColumn base={12} aboveSmall={8} aboveMedium={6} aboveLarge={4}>
        <div style={{ border: '1px solid red', width: '100%', height: '100px' }} />
    </GridColumn>
</Grid>