<style>
  /* specify viewport sizes to showcase media query + offset support */
  @custom-media --sm-viewport (min-width:320px) and (max-width:640px);
  @custom-media --md-viewport (min-width:640px) and (max-width:960px);
  @custom-media --lg-viewport (min-width:960px);

  .fixture-Box {
    background: rgb(100, 150, 50);
    background: rgb(100, 150, 50);
    border: 1px solid black;
    margin-bottom: 10px;
    min-height: 50px;
  }
  .fixture-Box--doubleHeight {
    min-height: 100px;
  }
  .Test {
    padding: 0 10px;
  }
</style>

<div class="l-grid">
  <div class="l-grid-cell u-size1of4"><div class="fixture-Box">1</div></div>
  <div class="l-grid-cell u-size1of4"><div class="fixture-Box">2</div></div>
  <div class="l-grid-cell u-size1of4"><div class="fixture-Box">3</div></div>
  <div class="l-grid-cell u-size1of4"><div class="fixture-Box">4</div></div> 
</div>

<div class="l-grid l-grid--alignRight"> 
  <div class="l-grid-cell u-size1of4"> <div class="fixture-Box">1</div> </div> 
  <div class="l-grid-cell u-size1of4"> <div class="fixture-Box">2</div> </div> 
  <div class="l-grid-cell u-size1of4"> <div class="fixture-Box">3</div> </div> 
</div>

<div class="l-grid l-grid--withGutter"> 
  <div class="l-grid-cell u-size1of4"> <div class="fixture-Box">1</div> </div> 
  <div class="l-grid-cell u-size1of4"> <div class="fixture-Box">2</div> </div> 
  <div class="l-grid-cell u-size1of4"> <div class="fixture-Box">3</div> </div> 
  <div class="l-grid-cell u-size1of4"> <div class="fixture-Box">4</div> </div> 
</div>