My guess is that when you say container, you're referring to the layout items. If that is the case, use a custom onResize method. Using the sandbox code you have from your question:

export default class ShowcaseLayout extends React.Component {
  constructor(props) {
    ...
    // add the line below
    this.onResize = this.onResize.bind(this);
  }

  ...

  // add the method
  onResize(layout, oldLayoutItem, layoutItem, placeholder) {
    // `oldLayoutItem` contains the state of the item before the resize.
    // You can modify `layoutItem` to enforce constraints.
    const allowableW = this.props.cols[this.state.currentBreakpoint] - oldLayoutItem.x
    if (layoutItem.w <= 4) {
      layoutItem.w = 4;
      placeholder.w = 4;
    } else if (layoutItem.w <= 6) {
      layoutItem.w = allowableW < 6 ? 4 : 6;
      placeholder.w = allowableW < 6 ? 4 : 6;
    } else {
      layoutItem.w = allowableW < 12 ? 6 : 12;
      placeholder.w = allowableW < 12 ? 6 : 12;
    }
  }

  render() {
    return (
      <div>
        ...
        <ResponsiveReactGridLayout
          ...
          {/* bind method to component */}
          onResize={this.onResize}
        >
          {this.generateDOM()}
        </ResponsiveReactGridLayout>
      </div>
    );
  }
}

ShowcaseLayout.propTypes = {
  onLayoutChange: PropTypes.func.isRequired
};

ShowcaseLayout.defaultProps = {
  ...
  // ensure your breakpoints have a minimum of 4 columns
  cols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 4 },
};

function generateLayout() {
  return _.map(_.range(0, 25), function (item, i) {
    var y = Math.ceil(Math.random() * 4) + 1;
    return {
      x: (_.random(0, 5) * 2) % 12,
      y: Math.floor(i / 6) * y,
      // set item's default width to 4
      w: 4,
      h: y,
      i: i.toString(),
      static: Math.random() < 0.05
    };
  });
}

DEMO

I don't know much about react-grid-layout.

But you can do it by a simple change in the cols property of ShowcaseLayout.defaultProps like following.

ShowcaseLayout.defaultProps = {
    className: "layout",
    rowHeight: 30,
    onLayoutChange: function() {},
    cols: { lg: 12, md: 12, sm: 6, xs: 4, xxs: 4 },
    initialLayout: generateLayout()
};

UPDATED Sandbox

Yes, you can certainly do that with react-grid-layout. In the section of their documentation labeled "Usage without Browserify/Webpack", they have this code snippet:

import { Responsive as ResponsiveGridLayout } from 'react-grid-layout';

class MyResponsiveGrid extends React.Component {
  render() {
    // {lg: layout1, md: layout2, ...}
    const layouts = getLayoutsFromSomewhere();
    return (
      <ResponsiveGridLayout className="layout" layouts={layouts}
        breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
        cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}}>
        <div key="1">1</div>
        <div key="2">2</div>
        <div key="3">3</div>
      </ResponsiveGridLayout>
    )
  }
}

You can modify the breakpoints however you like, which indicate at which screen/viewport width's the screen will consider a new size (e.g. lg vs. md vs. sm, etc.).

Once you've defined your breakpoints, define how many columns you would like each container to be at different breakpoints using the cols attribute. If you only want the three sizes you mentioned—1 full width (12 cols), ½ grid (6 cols), and ⅓ grid (4 cols)—adjust the cols attribute to something like this:

cols={{lg: 12, md: 6, sm: 6, xs: 4, xxs: 4}}

Using these redefined values, elements in this grid will be full-width on lg viewports, ½ the grid on md and sm viewports, and ⅓ the grid on xs and xxs viewports.