MDL grid is very similar to the Bootstrap one--12 columns and responsive to many screen sizes, this should be an easy transition. The only and main difference is that MDL grid doesn't have a container and a row. Instead, you can define a grid with an inner <div> tag as cells:
<div className="mdl-grid"><div className="mdl-cell mdl-cell--4-col">Content 1 </div> <div className="mdl-cell mdl-cell--4-col">Content 2 </div> <div className="mdl-cell mdl-cell--4-col">Content 3 </div></div>
Refactoring Cart.js in the render method can be done as follows:
render() { return ( <div className="mdl-grid"> {this.props.children} </div>)}
In the Cart page, we will render all the added items as a grid with 3 columns of size 4.
The CartTotal component ...
