html - 谷歌 Material 设计精简版: grid distribution

Question

使用 Google Material Lite，我想要 1 个较大的 div 和 4 个较小的 div，采用 2x2 格式，如下所示:

我最初的想法是将所有内容都放在一个 mdl 网格中。然后创建两个 mdl-grid，并在第二列中创建两行和两列以创建 1x1 和 2x2 效果。

但是，这似乎不可能，或者我只是做得不正确？

<div class="mdl-grid">
    <div class="mdl-grid">
        <div>image</div>
    </div>
    <div class="mdl-grid">
        <div class="mdl-grid">
            <div>1</div>
            <div>2</div>
        </div>
        <div class="mdl-grid">
            <div>3</div>
            <div>4</div>
        </div>
    </div>

 </div>

编辑 1:在第一条评论时添加单元格大小

<div class="mdl-grid">
    <div class="mdl-grid">
        <div class="mdl-cell mdl-cell--6-col">image</div>
    </div>
    <div class="mdl-grid">
        <div class="mdl-grid">
            <div class="mdl-cell mdl-cell--6-col">1</div>
            <div class="mdl-cell mdl-cell--6-col">2</div>
        </div>
        <div class="mdl-grid">
            <div class="mdl-cell mdl-cell--6-col">3</div>
            <div class="mdl-cell mdl-cell--6-col">4</div>
        </div>
</div>

Answer 1

您错过了 mdl-grid 内的 mdl-cell--12-col :

<div class="mdl-grid">
   <div class="mdl-cell mdl-cell--6-col bg-sky">
     image
   </div>
   <div class="mdl-cell mdl-cell--6-col">
      <div class="mdl-grid mdl-grid--no-spacing">
          <div class="mdl-cell mdl-cell--12-col">
              <div class="mdl-grid">
                  <div class="mdl-cell mdl-cell--6-col bg-sky">1</div>
                  <div class="mdl-cell mdl-cell--6-col bg-sky">2</div>
              </div>
              <div class="mdl-grid">
                 <div class="mdl-cell mdl-cell--6-col bg-sky mdl-col--stretch">3</div>
                 <div class="mdl-cell mdl-cell--6-col bg-sky mdl-col--stretch">4</div>
             </div>
         </div>
      </div>
   </div>
</div>

每个mdl-grid应该有mdl-cell，如果是一行则放置mdl-cell--12-col。

查看我的代码笔:Codepen Demo