Google material design lite : grid distribution

2
votes

Using google material lite, I want 1 larger div with 4 smaller div in a 2x2 format like this:

Grid

My initial thought was to house everything in one mdl-grid. Then create two mdl-grids, and, in the second column, create two rows and two columns to create the 1x1 and 2x2 effect.

However, this doesn't seem to be possible, or I am just not doing it correctly?

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

EDIT 1 : Adding cell sizes upon first comment

<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>
2
htmlcssmaterial-designmaterial-design-lite
You haven't told the mini-divs (or any of the divs) what size to be. – Paulie_D
@Paulie_D added sizes for the mini divs upong mdl docs, still doesn't solve it – The Other Guy
You would have to tell the two parent divs to be cells too don't forget. – Paulie_D

2 Answers

1
votes

You have missed mdl-cell--12-col inside 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>

Each mdl-grid should have mdl-cell, if it is a one row then put mdl-cell--12-col.

See my codepen : Codepen Demo

1
votes

It looks like you were missing an end </div> tag. This seemed to work for me:

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