Aligning

Error rendering component

Unknown plugin "module-resolver" specified in "base" at 0, attempted to resolve relative to "/home/circleci/wellcomecollection.org/common/views/grid/aligning"

export default () => (
  <div>
    <div className='grid grid--justify-start'>
      <div className='grid__cell grid__cell--s6 grid__cell--m6 grid__cell--l6'>
        <div className='grid-placeholder'></div>
      </div>
    </div>

    <div className='grid grid--justify-center'>
      <div className='grid__cell grid__cell--s6 grid__cell--m6 grid__cell--l6'>
        <div className='grid-placeholder'></div>
      </div>
    </div>

    <div className='grid grid--justify-end'>
      <div className='grid__cell grid__cell--s6 grid__cell--m6 grid__cell--l6'>
        <div className='grid-placeholder'></div>
      </div>
    </div>

    <div className='grid grid--spaced'>
      <div className='grid__cell grid__cell--s3 grid__cell--m4 grid__cell--l5'>
        <div className='grid-placeholder'></div>
      </div>

      <div className='grid__cell grid__cell--s3 grid__cell--m4 grid__cell--l5'>
        <div className='grid-placeholder'></div>
      </div>
    </div>

    <div className='grid'>
      <div className='grid__cell grid__cell--l5 grid__cell--shift-l1 grid__cell--m4 grid__cell--shift-m1 grid__cell--s3 grid__cell--shift-s3'>
        <div className='grid-placeholder'></div>
      </div>
      <div className='grid__cell grid__cell--l5 grid__cell--shift-l1 grid__cell--m3 grid__cell--shift-m1 grid__cell--s3 grid__cell--shift-s1'>
        <div className='grid-placeholder'></div>
      </div>
    </div>
  </div>
);
/* No context defined for this component. */

Applying a class of either grid--justify-start, grid--justify-center or grid--justify-end to the containing grid div will determine how grid cells are aligned horizontally.

Applying a class of grid--spaced to the containing grid element will space out its child grid__cells (useful for when e.g. there is an empty column of space between to content columns, rather than having to include an empty element for spacing).

Applying a class of grid__cell--shift-{viewport}{columns} adds left margin of {columns} width to the given cell at the {viewport} breakpoint.