The grid

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 ...

Get Build Applications with Meteor now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.