Material-design-lite: [Component Request] Grid lists

[nisrulz]

A grid list consists of a repeated pattern of cells arrayed vertically and horizontally within the grid list.
https://www.google.com/design/spec/components/grid-lists.html
A grid list is best suited to presenting homogenous data, typically images, and is optimized for visual comprehension and differentiating between similar data types.

[nickretallack]

I'd love to have both styles of labels on these grid items -- the style where the labels overlap the grid item's content, and the style where they are displayed below.

[Garbee]

Completely possible, it is just cards. In fact this is probably doable with the current grid system and some slight tweaks to cards via a modifier. Just need to dig into the spec and cross-reference things for initial triage.

[cliffordp]

Suggestion

This might be (close to) what you're wanting:

Just add the mdl-cell and mdl-cell--3-col (or another of your choosing) classes to your cards and wrap in a <div class="mdl-grid mdl-grid--no-spacing">

And add this extra styling (or add custom class and target that):
.mdl-cell { display: flex; }
.mdl-card { width: auto; flex: 1; }

Example 1

Full code example (with inline styling so you don't need the above 2 styling customizations):

<div class="mdl-grid mdl-grid--no-spacing">
    <div class="mdl-cell mdl-cell--3-col" style="display: flex;">
        <div class="mdl-card mdl-shadow--2dp" style="width: auto; flex: 1;">
            <div class="mdl-card__title">
                <h2>1st Card Title</h2>
            </div>
            <div class="mdl-card__actions mdl-card--border">
                <button class="mdl-button mdl-js-button mdl-js-ripple-effect">Button Text Here</button>
            </div>
        </div>
    </div>
    <div class="mdl-cell mdl-cell--3-col" style="display: flex;">
        <div class="mdl-card mdl-shadow--2dp" style="width: auto; flex: 1;">
            <div class="mdl-card__title">
                <h2>2nd Card Title</h2>
            </div>
            <div class="mdl-card__actions mdl-card--border">
                <button class="mdl-button mdl-js-button mdl-js-ripple-effect">Button Text Here</button>
            </div>
        </div>
    </div>
    <div class="mdl-cell mdl-cell--3-col" style="display: flex;">
        <div class="mdl-card mdl-shadow--2dp" style="width: auto; flex: 1;">
            <div class="mdl-card__title">
                <h2>3rd Card Title</h2>
            </div>
            <div class="mdl-card__actions mdl-card--border">
                <button class="mdl-button mdl-js-button mdl-js-ripple-effect">Button Text Here</button>
            </div>
        </div>
    </div>
    <div class="mdl-cell mdl-cell--3-col" style="display: flex;">
        <div class="mdl-card mdl-shadow--2dp" style="width: auto; flex: 1;">
            <div class="mdl-card__title">
                <h2>4th Card Title</h2>
            </div>
            <div class="mdl-card__actions mdl-card--border">
                <button class="mdl-button mdl-js-button mdl-js-ripple-effect">Button Text Here</button>
            </div>
        </div>
    </div>
</div>

Full demo example of code above (grid of 3-3-3-3): http://codepen.io/cliffordp/pen/WvgmMP?editors=110

Screenshot:

Example 2

Demo of grid 3-3-3-3 and grid 3-3-3-3: http://codepen.io/cliffordp/pen/aORoMe?editors=110

Example 3

Demo of grid 6-6 and grid 3-9: http://codepen.io/cliffordp/pen/GJXexx?editors=110

Screenshot:

Closing

I hope this helps you accomplish what you're wanting and/or have the MDL team make it simpler to implement.

[jargnar]

+1

[traviskaufman]

We will be implementing this in v2: see #4498

We are still in the very early stages of v2 and are currently working towards an alpha. Our master branch is where all v2 work is happening if you are interested in keeping up with its progress. 😄