이 그리드 항목에 두 가지 스타일의 레이블을 모두 갖고 싶습니다. 레이블이 그리드 항목의 내용과 겹치는 스타일과 레이블이 아래에 표시되는 스타일입니다.

완전히 가능합니다. 그것은 단지 카드입니다. 사실 이것은 아마도 현재 그리드 시스템과 수정자를 통해 카드에 약간의 조정을 가하면 가능할 것입니다. 초기 분류를 위해 사양과 상호 참조 항목을 파헤쳐야 합니다.

제안

이것은 당신이 원하는 것일 수 있습니다.

mdl-cell 및 mdl-cell--3-col (또는 선택한 다른 클래스) 클래스를 카드에 추가하고 <div class="mdl-grid mdl-grid--no-spacing">

그리고 이 추가 스타일을 추가하십시오(또는 사용자 정의 클래스를 추가하고 대상을 지정하십시오).
.mdl-cell { display: flex; }
.mdl-card { width: auto; flex: 1; }

실시예 1

전체 코드 예제(위의 2가지 스타일 사용자 지정이 필요하지 않은 인라인 스타일 사용):

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

위 코드의 전체 데모 예(3-3-3-3 그리드): http://codepen.io/cliffordp/pen/WvgmMP?editors=110

스크린샷:

실시예 2

그리드 3-3-3-3 및 그리드 3-3-3-3 데모: http://codepen.io/cliffordp/pen/aORoMe?editors=110

실시예 3

그리드 6-6 및 그리드 3-9 데모: http://codepen.io/cliffordp/pen/GJXexx?editors=110

스크린샷:

폐쇄

이것이 여러분이 원하는 것을 달성하는 데 도움이 되거나 MDL 팀이 구현을 더 간단하게 만드는 데 도움이 되기를 바랍니다.

+1

우리는 이것을 v2에서 구현할 것입니다: #4498 참조

우리는 아직 v2의 초기 단계에 있으며 현재 알파를 향해 노력하고 있습니다. 우리의 master 분기는 진행 상황을 따라가는 데 관심이 있는 경우 모든 v2 작업이 일어나는 곳입니다. 😄