<div class="grid">
  <h1>Naming columns</h1>
  
  <div class="one">start-half</div>
  <div class="two">full 
  </div>
  <div class="three">end-half</div>
</div>

body {
  margin: 0 ;
  padding: 2em 0 0 0;
  font: 125% "Open sans", sans-serif;
}

.grid {
  display: grid;
  gap: 20px;
  grid-template-columns:
    [full-start] minmax(0,1fr)
    [content-start start-half-start] minmax(0,2fr)
    [start-half-end end-half-start] minmax(0,2fr)
    [end-half-end content-end] minmax(0,1fr)
    [full-end];
}

.grid > * {
  background-color: rgb(114,132,168);
  color: #fff;
  padding: 1em;
  margin: 0;
}

h1 {
  font-family: 'Proza Libre', sans-serif;
  grid-column: content-start / content-end;
}

.one {
  grid-row: 2;
  grid-column: start-half-start / start-half-end;
}

.two {
  grid-row: 3;
  grid-column: full-start / full-end;
}

.three {
  grid-row: 4;
  grid-column: end-half-start / end-half-end;
}