Grid

A responsive grid based on element queries in favour of media queries.

Introduction

Grids provide users with a way to view content in an organized manner that might otherwise be difficult to understand or retain. Their design and use is an important factor in the overall user experience.

The Material Design Lite Ext (MDLEXT) grid has two versions; one version based on media queries and one version based on element queries. The MDLEXT grid is a copy of the Material Design Lite grid - with additional element queries support to distribute grid cells in a more responsive fashion.

How to use the eq.js version of MDLEXT grid

 1. Install eq.js.

$ npm install --save eq.js

 2. Import mdl-ext-eqjs.scss in your main SASS file. Remove mdl-ext.scss - they can not co exist.

@import '../node_modules/mdl-ext/src/mdl-ext-eqjs';

 3. Import or Require eq.js.

const eqjs = require('eq.js'); // ... or:  import eqjs from 'eq.js';

 4. Optionally trigger eq.js
If you're loading html fragments using e.g. Ajax, then trigger eq.js after page load.

window.fetch(href, {method: 'get'})
 .then(response => response.text())
 .then(text => {
   contentPanelEl.insertAdjacentHTML('afterbegin', text);

   // Trigger eq.js
   eqjs.refreshNodes();
   eqjs.query(undefined, true);
})
.catch(err => console.error(err));

An example of how to use eq.js in a SPA can be found here.

To include a MDLEXT grid component:

Folow the documention for the original mdl-grid. Just replace mdl- with mdlext-, and you're good to go.