title: Angular Material: How do you specify spacing between two columns in a layout?
body: <p>Suppose I have two columns in a single row in an Angular Material layout:</p>
  
  <pre><code>&lt;div layout="row" flex&gt;
    &lt;div layout="column" flex="50"&gt;
      Content 1...
    &lt;/div&gt;
    &lt;div layout="column" flex="50"&gt;
      Content 2...
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now, suppose I want to set an arbitrary amount of space between the columns (a "gutter" of, say, 10px). I could create a third empty div, set a small "flex" value and modify the "flex" values from 50 to something smaller, but that seems like a hack and would create a percentage-based gutter width. It seems like there should be a cleaner way to get an exact gutter without creating empty divs. Do I have to put classes on my column divs and set CSS margin values (and deal with left vs right, etc.)? Anyone have any pointers to do this the Angular Material way?</p>