Flex grid of: 'double', 'tripple', 'one-two', 'two-one'

Grid.css

$gridPadding: 7px;

@define-mixin padding-double $p {
  &._padding-h {
    &:nth-child(odd)  { padding: 0 $p 0 0 }
    &:nth-child(even) { padding: 0 0  0 $p }
  }

  &._padding-v {
    padding: $p 0 $p 0;
    &:nth-child(1) { padding: 0 0 $p 0 }
    &:nth-child(2) { padding: 0 0 $p 0 }
  }

  &._padding-all {
    &:nth-child(odd)  { padding: $p $p $p 0 }
    &:nth-child(even) { padding: $p 0  $p $p }
    &:nth-child(1)    { padding: 0  $p $p 0 }
    &:nth-child(2)    { padding: 0  0  $p $p }
  }
}

@define-mixin padding-tripple $p {
  $paddingSide:   calc($p * 0.33 + $p);
  $paddingCenter: calc($p * 0.66);

  &._padding-h {
    &:nth-child(3n - 2) { padding: 0 $paddingSide 0 0 }
    &:nth-child(3n + 2) { padding: 0 $paddingCenter 0 $paddingCenter }
    &:nth-child(3n)     { padding: 0 0              0 $paddingSide }
  }

  &._padding-v {
    padding: $p 0 $p 0;
    &:nth-child(1) { padding: 0 0 $p 0 }
    &:nth-child(2) { padding: 0 0 $p 0 }
    &:nth-child(3) { padding: 0 0 $p 0 }
  }

  &._padding-all {
    &:nth-child(3n - 2) { padding: $p $paddingSide   $p 0 }
    &:nth-child(3n + 2) { padding: $p $paddingCenter $p $paddingCenter }
    &:nth-child(3n)     { padding: $p 0              $p $paddingSide }

    &:nth-child(1) { padding: 0 $paddingSide   $p 0 }
    &:nth-child(2) { padding: 0 $paddingCenter $p $paddingCenter }
    &:nth-child(3) { padding: 0 0              $p $paddingSide }
  }
}

.root {
  display: flex;
  flex-flow: row wrap;
  justify-content: left;
}

.col {
  box-sizing: border-box;

  ._size-double > & {
    width: 50%;
    @mixin padding-double $gridPadding;
  }

  ._size-tripple > & {
    width: 33.33%;
    @mixin padding-tripple $gridPadding;
  }

  ._size-one-two > & {
    &:nth-child(odd)  { width: 33.33% }
    &:nth-child(even) { width: 66.66% }
    @mixin padding-double $gridPadding;
  }

  ._size-two-one > & {
    &:nth-child(n)  { width: 66.66% }
    &:nth-child(2n) { width: 33.33% }
    @mixin padding-double $gridPadding;
  }
}

._align-left {
  text-align: left;
}
._align-center {
  text-align: center;
}
._align-right {
  text-align: right;
}

Grid.jsx

import React, { PureComponent, PropTypes } from 'react';
import classNames from 'classnames';

import styles from './Grid.css';

export class GridCol extends PureComponent {
  static propTypes = {
    align: PropTypes.oneOf(['left', 'center', 'right']),
    className: PropTypes.string,
    padding: PropTypes.oneOf(['none', 'h', 'v', 'all'])
  };

  static defaultProps = {
    align: 'left',
    className: '',
    padding: 'none'
  };

  render() {
    const { align, children, className, padding } = this.props;

    const classSet = classNames(styles.col, {
      [styles[`_align-${align}`]]: true,
      [styles[`_padding-${padding}`]]: padding !== 'none'
    }, className);

    return (
      <div className={classSet}>{children}</div>
    );
  }
}

export class Grid extends PureComponent {
  static propTypes = {
    size: PropTypes.oneOf(['double', 'tripple', 'one-two', 'two-one']),
    children: PropTypes.arrayOf(PropTypes.element)
  };

  static defaultProps = {
    size: 'tripple'
  };

  render() {
    const { size, children } = this.props;
    const classSet = classNames(styles.root, {
      [styles[`_size-${size}`]]: true
    });

    return (
      <div className={classSet}>
        {children}
      </div>
    );
  }
}

Story.jsx

import React from 'react';
import { storiesOf } from '@kadira/storybook';
import { Grid, GridCol } from './Grid.jsx';

const gridList = (p = 'none', n = 11) => {
  const list = [];
  for (let i = 0; i < n; i++) {
    arr.push(
      <GridCol key={i} padding={p}>Lorem ipsum dolor sit amet</GridCol>
    );
  }
  return list;
}

storiesOf('Grid', module)
  // double section
  .addWithInfo('double', () => (
    <Grid size="double">{gridList()}</Grid>
  ))
  .addWithInfo('double padding h', () => (
    <Grid size="double">{gridList('h')}</Grid>
  ))
  .addWithInfo('double padding v', () => (
    <Grid size="double">{gridList('v')}</Grid>
  ))
  .addWithInfo('double padding all', () => (
    <Grid size="double">{gridList('all')}</Grid>
  ))
  //tripple section
  .addWithInfo('tripple', () => (
    <Grid size="tripple">{gridList()}</Grid>
  ))
  .addWithInfo('tripple padding h', () => (
    <Grid size="tripple">{gridList('h')}</Grid>
  ))
  .addWithInfo('tripple padding v', () => (
    <Grid size="tripple">{gridList('v')}</Grid>
  ))
  .addWithInfo('tripple padding all', () => (
    <Grid size="tripple">{gridList('all')}</Grid>
  ))
  // one-two section
  .addWithInfo('one-two', () => (
    <Grid size="one-two">{gridList()}</Grid>
  ))
  .addWithInfo('one-two padding h', () => (
    <Grid size="one-two">{gridList('h')}</Grid>
  ))
  .addWithInfo('one-two padding v', () => (
    <Grid size="one-two">{gridList('v')}</Grid>
  ))
  .addWithInfo('one-two padding all', () => (
    <Grid size="one-two">{gridList('all')}</Grid>
  ))
  // two-one section
  .addWithInfo('two-one', () => (
    <Grid size="two-one">{gridList()}</Grid>
  ))
  .addWithInfo('two-one padding h', () => (
    <Grid size="two-one">{gridList('h')}</Grid>
  ))
  .addWithInfo('two-one padding v', () => (
    <Grid size="two-one">{gridList('v')}</Grid>
  ))
  .addWithInfo('two-one padding all', () => (
    <Grid size="two-one">{gridList('all')}</Grid>
  ));

Я у мамки верстун