// the ONLY case in which you would do this is where:
//1. you are using named areas AND
//2. those areas are sized in fr

$b: 1.25rem; // base spacing unit of site
$cols: 12; // parent grid has 12 cols

@mixin alignToParent($map){
  $i: 1; // start the count at 1 for items in map
  $m: 0; // set multiplier to 0 as first margin is always 0
  $g: $b/$cols; // gutter is the base spacing unit divided by the number of cols in the parent grid
  @each $key, $value in $map {
    &__#{$key} {
      margin-left:calc(#{$g} * #{$m});
      $m: $m + $value; //add the current fr unit to pass to the next element as multiplier
      @if $i == length($map) { //if we have reached the end of the columns we set the margin to 0
        margin-right: 0; //end
      } @else {
         $r: $cols - $m; //right hand margin is the inverse, so subtract from number of $cols
      margin-right:calc(#{$g} * #{$r});
        $i: $i + 1; //otherwise increment our counter and go round again
      }
    }
  }
 }

// include autoassign mixin 
//https://codepen.io/Sally_McGrath/pen/wQyzBX
@mixin template($elements...) {
  @each $element in $elements {
    &__#{$element} {
      grid-area: $element;
    }
  }
}

/// now apply margins
.c-region {
  display:grid;
  align-items:center;
  @include template(title,subtitle,nav);
  grid-template-areas: 
    "title subtitle  nav";
    grid-template-columns: 5fr 3fr 4fr;
    $assign: (title: 5, subtitle: 3, nav: 4);
    @include alignToParent($assign);
  }
.o-parent {
  display: grid;
  grid-template-columns: repeat($cols, 1fr);
  grid-gap: $b;
  > * {grid-column: 1/-1}
}









//ignore this, just to make something show up
body{font:1em Futura,sans-serif;}
.c-region  {
  $p: &;

  
  >* {background: pink; height:100%}
    
  }
  


.spacer {min-height:50vh}