MDL "advanced"グリッド構造

Question

私はmdl dashboard exampleと同じようなものを実現しようとしています。左側にカードが1枚あり、右側に2枚のカードがあります（imgurアルバムの最初の画像のように）、 それは、それがimgurアルバムに第二の画像のようになる錠剤レイアウトに変更：

http://imgur.com/a/dT4Eo

ありますので、IMG-Cのみタブレットレイアウト3の幅を持っているので、それは例で動作する理由はmdl-grid-no-spacingによって失われたスペースを補うための非表示の1-colの区切り。私はIMG-BおよびIMG-Cの両方がタブレットレイアウトにおける4-COL幅を持っていると思った場合

私の質問は、どのようにこのレイアウト構造を達成することができたのですか？

Answer 1

!importantテーマをデザインするときは間違いなく避けるべきですが、mdl classレイアウトを上書きする場合は何も問題ありません。参照：、あなたの目的の外観を実現するタブレットビューで.demo-separatorを隠し、4列タブレットの代わりに、3に第三カードクラスを設定するには

<div class="mdl-grid"> 
    <div class="mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-cell--12-col-desktop" /> 
    <div class="mdl-cell mdl-grid mdl-grid--no-spacing"> 
    <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop" /> 
    <div class="mdl-cell demo-separator mdl-cell--1-col" /> 
    <div class="mdl-cell mdl-cell--4-col mdl-cell--3-col-tablet mdl-cell--12-col-desktop" /> 
    </div> 
</div> 

：https://css-tricks.com/when-using-important-is-the-right-choice/

はにMDLの例のレイアウトを簡素化してみましょう：

<div class="mdl-cell demo-separator mdl-cell--1-col mdl-cell--hide-tablet" /> 
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop" /> 

2列目の列のサイズを再調整する必要があります。私は（のは.grid-central--spacingそれを呼びましょう）.mdl-grid--no-spacingにオーバーライドクラスを追加します。私のstyle.cssで

<div class="mdl-cell mdl-grid mdl-grid--no-spacing grid-central--spacing"> 

を、私はとスタイリングを上書きすることができます。

@media (max-width: 839px) and (min-width: 480px) { 
    .grid-central--spacing .mdl-cell--4-col-tablet { 
    width: calc(50% - 8px) !important; 
    } 
    .grid-central--spacing .mdl-cell--4-col-tablet:first-child { 
    margin-right: 8px; 
    } 
    .grid-central--spacing .mdl-cell--4-col-tablet:last-child { 
    margin-left: 8px; 
    } 
} 

2間16pxの間隔がなければなりませんカードがタブレットビューに表示されます。