Angular Material: How do you specify spacing between two columns in a layout?

Question

Suppose I have two columns in a single row in an Angular Material layout:

<div layout="row" flex>
  <div layout="column" flex="50">
    Content 1...
  </div>
  <div layout="column" flex="50">
    Content 2...
  </div>
</div>

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?

Answer 1

I'm not sure if it's the "Angular Material" way of doing things. But I feel your pain.

Currently, I'm migrating some Bootstrap code over to Angular Material and do need a way of doing this.

Here's what I've done.

Since Angular Material's layout directive affects only immediate children, I do believe that is an Angular Material way of operating. So, on the layout div, I add a class, gutter and here is the SASS (just prettier CSS, with variables) that accompanies that class:

.gutter {
    (greater-than) * {
        padding-right: $layout-gutter-width;
        ~ * {
            padding-left: $layout-gutter-width;
        }
        &:last-of-type {
            padding-right: 0;
        }
    }
}

notice - I'm not sure how to put > inside there, so substitute that for "(greater-than)"

Explanation
$layout-gutter-width is actually defined by angular-material.scss which ships with Angular Material (and I use SASS in my project) but you can set it as whatever you want, CSS or SASS, 10px, 16px, 50px, whatever.

For those not entirely familiar with what's happening in this SASS:

> * here means "Any immediate descendant of..."
~ * here means "Any immediate sibling of..."
&:last-of-type here means "The very last of these immediate descendants..."

So, for every immediate descendant of the element with class gutter, we add padding-right. For every subsequent sibling element, we add padding-left, and for the very last element, we remove the padding-right. The first element will not have padding-left and the last element will not have padding-right.

Ultimately this gets the padding we want.

<div layout="row" class="gutter" layout-align="center center">
    <div flex="50">
        ...
    </div>
    <div flex="50">
        ...
    </div>
</div>

Answer 2

I believe the 'Material way' for your sample to get space between, nowadays at least, would be something like this:

<div fxLayout="row" flex fxLayoutGap="10px">
  <div fxLayout="column" flex="50">
    Content 1...
  </div>
  <div fxLayout="column" flex="50">
    Content 2...
  </div>
</div>