Material Design Lite: nested grid

Question

I am building a site with Google's MDL and wondering how to work with nested grids properly.

Every nesting level shifts a little to the right. That becomes quite odd, when you just want to list some products or have other nested cells.

See http://codepen.io/suntrop/pen/BQPody

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--8-col">
    <h1>Page Titel</h1>
    <p>Some content</p>
    <div class="mdl-grid">
      <div class="mdl-cell mdl-cell--6-col">
        Product #1
          <div class="mdl-grid">
            <div class="mdl-cell mdl-cell--6-col">
              <img src="http://placehold.it/100" alt="" />
            </div>
            <div class="mdl-cell mdl-cell--6-col">
               Product Description
              <ul>
                <li>One</li>
                <li>Two</li>
                <li>Three</li>
              </ul>
            </div>
        </div>
      </div>
      <div class="mdl-cell mdl-cell--6-col">
        Products #2 <br />
        …
      </div>
    </div>
  </div>
  <div class="mdl-cell mdl-cell--4-col">
    <h3>Sidebar</h3>
  </div>
</div>

Grids I know (if I'am not wrong :-) stay vertically in a line. So that title, content, product title and its picture are perfectly aligned.

There is a mdl-grid--no-spacing class, but this removes all spacing. Even that under the cell and to the right.

Perhaps I missed something in the MDL concept or I have to code my own "grid class". Perhaps I am doing something other wrong :-)

How about adding mdl-grid--no-spacing to disable spacing, and then add extra class for product cells, with padding-right and padding-bottom properties? — Georgy
It is a solution, but feels like getting some flash lights with your new car, because you can only have a car with dark purple headlights or without any headlights at all. But not bright white. Well, if this is the intended way, ok :-) — suntrop

ssteele ssteele · Accepted Answer · 2018-01-20T22:05:52

Tadashi has a codepen available here:

https://codepen.io/tadashi1105/pen/MwPOJx

He's extended MDL by adding a nesting modifier:

.mdl-grid .mdl-grid.mdl-grid--nesting {
  padding: 0;
  margin: 0 -8px;
}

The markup provided looks like:

<div class="mdl-cell mdl-cell--4-col">4
    <div class="mdl-grid mdl-grid--nesting">
        <div class="mdl-cell mdl-cell--4-col">4</div>
        <div class="mdl-cell mdl-cell--4-col">4</div>
        <div class="mdl-cell mdl-cell--4-col">4</div>
    </div>
</div>

I'm new to MDL, but extending the basic library by providing your own BEM structure - blocks, elements, and modifiers (see https://en.bem.info/methodology/quick-start/) - seems to be the paradigm here. In that way it's a little different than Bootstrap or Foundation.

Material Design Lite: nested grid

1 Answers