Google材料设计精巧:网格分布

Question

使用，我需要一个更大的div和4个2x2格式的较小div，如下所示：

​

​

我最初的想法是把所有的东西都放在一个mdl网格里。然后创建两个mdl网格，并在第二个列中创建两个行和两个列来创建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-cell--12-col在mdl-grid中的位置：

<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网格应该有mdl-单元格，如果它是一行，则放置mdl-cell--12-col。

见我的代码：Codepen Demo

Answer 2

看起来你丢失了一个结束</div>标签。这似乎适用于我：

<div class="mdl-grid">
<div class="mdl-grid  mdl-cell">image

</div>
<div class="mdl-grid mdl-cell">
    <div class="mdl-grid  mdl-cell">
        <div class="mdl-cell mdl-cell--5-col">1 rehrewhwer</div>
        <div class="mdl-cell mdl-cell--5-col">2 er her wreh </div>
    </div>
    <div class="mdl-grid mdl-cell">
        <div class="mdl-cell mdl-cell--5-col">3 hrew rew</div>
        <div class="mdl-cell mdl-cell--5-col">4  eryh rwey erw</div>
    </div>
</div>

​