Supongo que cuando dice contenedor, se refiere a los elementos de diseño. Si ese es el caso, use un método onResize personalizado. Usando el código de sandbox que tiene de su pregunta:

 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 }; }); }

MANIFESTACIÓN

No sé mucho sobre react-grid-layout .

Pero puede hacerlo con un simple cambio en la propiedad cols de ShowcaseLayout.defaultProps como sigue.

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

Caja de arena ACTUALIZADA

Sí, ciertamente puedes hacer eso con react-grid-layout . En la sección de su documentación etiquetada como "Uso sin Browserify/Webpack" , tienen este fragmento de código:

 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> ) } }

Puede modificar los puntos de interrupción como desee, que indican en qué ancho de pantalla/ventana la pantalla considerará un nuevo tamaño (p. ej., lg frente a md frente a sm , etc.).

Una vez que haya definido sus puntos de breakpoints , defina cuántas columnas desea que esté cada contenedor en diferentes puntos de interrupción utilizando el atributo cols . Si solo desea los tres tamaños que mencionó: 1 ancho completo (12 columnas), ½ cuadrícula (6 columnas) y ⅓ cuadrícula (4 columnas), ajuste el atributo de cols a algo como esto:

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

Con estos valores redefinidos, los elementos de esta cuadrícula tendrán el ancho completo en las ventanas gráficas lg , la mitad de la cuadrícula en las ventanas gráficas md y sm , y la mitad de la cuadrícula en las ventanas gráficas xs y xxs .