Grid

The Grid component creates a responsive, flexible grid layout. You can use it to create layouts with different column configurations depending on the screen size.

Import

import { Grid, Item } from '@ef-global/backpack/Grid';

Usage

<Grid>
  <Item>Content</Item>
  <Item>Content</Item>
</Grid>

Examples

Default

Item bounds-start

Item offset-start

Item col-1

Item col-2

Item col-3

Item col-4

Item col-5

Item col-6

Item col-7

Item col-8

Item col-9

Item col-10

Item col-11

Item col-12

Item offset-end

Item bounds-end

const BreakpointViewer = () => {
  const { breakpoint } = useBreakpoint();
  return <span className='grid-bp'>{breakpoint}</span>;
};
const configCols = {
  //...
};
const GridExample = () => {
  return (
    <Grid>
      {Object.keys(configCols).map((v, i) => {
        return (
          <Item key={i} column={{ s: configCols[v] }} className={'grid-demo'}>
            <div className={'docs-grid-item'}>Item {v}</div>
          </Item>
        );
      })}
    </Grid>
  );
};
<GridExample />

Columns

boundsboundsbounds

const ColumnsExample = () => (
    <Grid className='u-mt-xxl'>
      <Item
        column={{
          s: ['bounds-start', 'bounds-end'],
          m: ['col-1-start', 'col-6-end'],
        }}
      >
        <div className='grid-demo-lines'>
          <span className='grid-label md:u-hidden'>bounds</span>
          <span className='grid-label u-hidden md:u-inline-block lg:u-hidden'>
            bounds
          </span>
          <span className='grid-label u-hidden lg:u-inline-block'>bounds</span>
        </div>
      </Item>
      //...
    </Grid>
);
<ColumnsExample />

Gallery Image