<pre>
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px;
</pre>
<div class="wrapper grid1">
  <div class="red"></div>
  <div class="orange"></div>
  <div class="yellow"></div>
  <div class="blue"></div>
  <div class="yellowgreen"></div>
</div>
<pre>
<b>Position red block</b>
</pre>
<div class="wrapper grid2">
  <div class="red positioned"></div>
  <div class="orange"></div>
  <div class="yellow"></div>
  <div class="blue"></div>
  <div class="yellowgreen"></div>
</div>
pre {
  margin: 0;
  margin-bottom: .25rem;
}

.wrapper{
    display:grid;
    margin-bottom: 1rem; 
}

.grid1{
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: 100px 100px;
}

.grid2{
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: 100px 100px;
}

/* Item */
.positioned{
  grid-column-start:1;  
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
  /*
  shorthand:
  grid-column: 1/3;
  grid-row: 1/3;
  */
}

.red{
  background-color: red;
}

.orange{
  background: orange;
}

.yellow{
  background: yellow;
}

.blue{
  background: blue;
}

.yellowgreen{
  background: yellowgreen;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.