SOURCE

console 命令行工具 X clear

                    
>
console
var GridLayout = window.ReactGridLayout
var WidthProvider = GridLayout.WidthProvider
const ReactGridLayout = WidthProvider(GridLayout);
var App = React.createClass({
  
  render() {
    return (
    	<ReactGridLayout rowHeight={30}>
      	<div key="1" data-grid={{ x: 0, y: 0, w: 2, h: 3 }}>
          <span className="text">1</span>
        </div>
        <div key="2" data-grid={{ x: 2, y: 0, w: 4, h: 3, static: true }}>
          <span className="text">2 - Static</span>
        </div>
        <div key="3" data-grid={{ x: 6, y: 0, w: 2, h: 3 }}>
          <span className="text">3</span>
        </div>
      </ReactGridLayout>
    )
  }
  
})

ReactDOM.render(<App/>, document.getElementById('root'))
<div id='root'></div>
body {
  background: white;
  padding: 20px;
  overflow: scroll;
}

.react-grid-layout {
  background: #eee;
}

.react-grid-item:not(.react-grid-placeholder) {
  background: #ccc;
  border: 1px solid black;
}

.react-grid-item.static {
  background: #cce;
}