container-units-expose-container-lines.scss

/*
<div class="_container-lines"><div></div></div>
*/

._container-lines {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--ContainerWidth);
  
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), var(--column-unit));
  grid-column-gap: var(--gutter-unit);

  &:before,
  &:after,
  & *:before,
  & *:after {
    content: '';
    background: rgba(255,230,251, .2);
    border: 1px dashed rgba(217,169,209, .4);
  }
  
  * {
    display: contents;
  }
  
  &:before {
    grid-column: 1 / span 1;
  }
  
  &:after {
    grid-column: -2 / span 1;
  }
  
  *:before {
    grid-column: 2 / span 1;
  }
  
  *:after {
    grid-column: -3 / span 1;
  }
}