Edit in JSFiddle

.wrapper {
    background: #e0e0e0;
  display: grid;
  grid-template-columns: 100px 10px 100px 10px 100px;
  grid-template-rows: auto 10px auto;
  margin: 1em;
  overflow: auto;
    
  .box { box-sizing: border-box; border: 1px dotted #000; background: #666; color: #fff; padding: 20px; }
    
  /*.a { background: #f00; }
  .b { background: #ff0; }
  .c { background: #f0f; }
  .d { background: #0ff; }
  .e { background: #0f0; }
  .f { background: #00f; }*/
}
.wrapper:after { position: absolute; left: .5em; }

.ex1 { border: 1px solid #ccc; height: 100px; }
.ex1:after { content: "1"; }

.ex2 {
  .a { 
    grid-column-start: 1;
    grid-column-end: 2; 
    grid-row-start: 1;
    grid-row-end: 2;
  }
  .b {
    grid-column-start: 3;
    grid-column-end: 4; 
    grid-row-start: 1;
    grid-row-end: 2; 
  }
  .c { 
    grid-column-start: 5;
    grid-column-end: 6; 
    grid-row-start: 1;
    grid-row-end: 2;
  }
  .d { 
    grid-column-start: 1;
    grid-column-end: 2; 
    grid-row-start: 3;
    grid-row-end: 4;
  }
  .e { 
    grid-column-start: 3;
    grid-column-end: 4; 
    grid-row-start: 3;
    grid-row-end: 4;
  }
  .f { 
    grid-column-start: 5;
    grid-column-end: 6; 
    grid-row-start: 3;
    grid-row-end: 4;
  }
}
.ex2:after { content: "2"; }

.ex3 {
  /* shorthand from ex2 */
  .a { grid-column: 1 / 2; grid-row: 1 / 2; }
  .b { grid-column: 3 / 4; grid-row: 1 / 2; }
  .c { grid-column: 5 / 6; grid-row: 1 / 2; }
  .d { grid-column: 1 / 2; grid-row: 3 / 4; }
  .e { grid-column: 3 / 4; grid-row: 3 / 4; }
  .f { grid-column: 5 / 6; grid-row: 3 / 4; }
}
.ex3:after { content: "3"; }

.ex4 { 
    /* short-shorthand from ex2 */
    /* grid-area: row-start/column-start/row-end/column-end */
   .a { grid-area: 1 / 1 / 2 / 2; }
   .b { grid-area: 1 / 3 / 2 / 4; }
   .c { grid-area: 1 / 5 / 2 / 6; }
   .d { grid-area: 3 / 1 / 4 / 2; }
   .e { grid-area: 3 / 3 / 4 / 4; }
   .f { grid-area: 3 / 5 / 4 / 6; }
}
.ex4:after { content: "4"; }

.ex5 {
  .a { 
    grid-column: 1 / 4; 
    grid-row: 1 / 2;
  }
  .b { 
    grid-column: 5 / 6; 
    grid-row: 1 / 4;
  }
  .c { 
    grid-column: 1 / 2; 
    grid-row: 3 / 4;
  }
  .d { 
    grid-column: 3 / 4; 
    grid-row: 3 / 4;
  }
}
.ex5:after { content: "5"; }

.ex6 {
  .a { 
    grid-column: 1 / span 3; 
    grid-row: 1 ;
  }
  .b { 
    grid-column: 5 ; 
    grid-row: 1 / span 3;
  }
  .c { 
    grid-column: 1 ; 
    grid-row: 3 ;
  }
  .d { 
    grid-column: 3 ; 
    grid-row: 3 ;
  }
}
.ex6:after { content: "6"; }

.ex7 {
  display: grid;
  grid-template-columns: (col1-start) 100px (col1-end) 10px (col2-start) 100px (col2-end) 10px (col3-start) 100px (col3-end);
  grid-template-rows: (row1-start) auto (row1-end) 10px (row2-start) auto (row2-end);
  .a { 
    grid-column: col1-start / col2-end; 
    grid-row: row1-start ;
  }
  .b { 
    grid-column: col3-start ; 
    grid-row: row1-start / row2-end;
  }
  .c { 
    grid-column: col1-start; 
    grid-row: row2-start ;
  }
  .d { 
    grid-column: col2-start ; 
    grid-row: row2-start ;
  }
}
.ex7:after { content: "7"; }