[SOLVED] What's the best way to add a title to a grid/row in MDL

What's the best way to add a title to a grid/row in MDL

I'm wondering what the recommended way is to add title to a row in material design lite. Below I have a row (ie: a grid) with two columns in it. Suppose I want to add a title/heading to it. When you run the below code, you will see that the title is hugging the left of the document (and doesn't have the same indentation level as the content).

<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<h3>My Title</h3>
<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--3-col">
    Content 1
  </div>
  <div class="mdl-cell mdl-cell--3-col">
    Content 2
  </div>
</div>

I could easily add some CSS to add some padding/margin to left of the <h3> but this feels a little hacky to me and doesn't feel like I'm using MDL properly if I were to do that.

I also tried moving the <h3> inside the row/grid div, but this causes things to become unaligned...

<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">


<div class="mdl-grid">
  <h3>My Title</h3>
  <div class="mdl-cell mdl-cell--3-col">
    Content 1
  </div>
  <div class="mdl-cell mdl-cell--3-col">
    Content 2
  </div>
</div>

The only way I can think of is by wrapping the <h3> in its own mdl-grid. This works but it adds unwanted padding above and below the title (due to it being in a grid).

<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--12-col">
    <h3>My Title</h3>
  </div>
</div>
<div class="mdl-grid">
  
  <div class="mdl-cell mdl-cell--3-col">
    Content 1
  </div>
  <div class="mdl-cell mdl-cell--3-col">
    Content 2
  </div>
</div>

Is there anyway to simply add a title to a row using mdl?

Solution

Like that ?:

<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<div class="mdl-layout__title">
  <div class="mdl-cell mdl-cell--12-col">
    <h3>My Title</h3>
  </div>
</div>
<div class="mdl-grid">
  
  <div class="mdl-cell mdl-cell--3-col">
    Content 1
  </div>
  <div class="mdl-cell mdl-cell--3-col">
    Content 2
  </div>
</div>

I change first mdl-grid to mdl-layout__title