title: Table-like layout using angular material design
body: <p>Is there any way to let angular material design layouts align <strong>both</strong> lines and columns, like a table would ?</p>
  
  <p>To make things clear, what I would like is to align cells in the table below.</p>
  
  <p>Of course I could add some <code>flex="xxx"</code> but the problem is I don't want to fix the width of the columns.</p>
  
  <p>I'm also interested in a css / flexbox solution.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html lang="en" &gt;
  &lt;head&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"&gt;
  &lt;/head&gt;
  &lt;body ng-app="BlankApp" ng-cloak&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;    
      angular.module('BlankApp', ['ngMaterial']);
    &lt;/script&gt;
  
    &lt;style&gt;
      .myCell {
        border: solid black 1px;
        padding: 10px;
      }
    &lt;/style&gt;
    &lt;div layout="column"&gt;
      &lt;div layout="row"&gt;
        &lt;div class="myCell"&gt;ROW 1, CELL 1&lt;/div&gt;
        &lt;div class="myCell"&gt;ROW 1, CELL 2&lt;/div&gt;
        &lt;div class="myCell"&gt;ROW 1, CELL 3&lt;/div&gt;
      &lt;/div&gt;
      &lt;div layout="row"&gt;
        &lt;div class="myCell"&gt;A LONGER CELL&lt;/div&gt;
        &lt;div class="myCell"&gt;ROW 2, CELL 2&lt;/div&gt;
        &lt;div class="myCell"&gt;ROW 2, CELL 3&lt;/div&gt;
      &lt;/div&gt;  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>