<div id="wrapper">
<div id="gridAutoFlow" class="radios">
<input type="radio" name="gridAutoFlow" value="row" checked> grid-auto-flow: row;<br>
<input type="radio" name="gridAutoFlow" value="row dense"> grid-auto-flow: row dense;<br>
<input type="radio" name="gridAutoFlow" value="column" > grid-auto-flow: column;<br>

<input type="radio" name="gridAutoFlow" value="column dense" > grid-auto-flow: column dense;<br>

</div>
<div id="cuadricula">
<div class="item" style="--color:#429b3e;"><p>1</p></div>   
<div class="item" style="--color:#429b3e;"><p>2</p></div>
<div class="item" style="--color:#429b3e;"><p>3</p></div>
<div class="item" style="--color:#429b3e;"><p>4</p></div>
<div class="item" style="--color:#429b3e;"><p>5</p></div>
<div class="item" style="--color:#429b3e;"><p>6</p></div>   
<div class="item" style="--color:#429b3e;"><p>7</p></div>
<div class="item" style="--color:#429b3e;"><p>8</p></div>
<div class="item" style="--color:#429b3e;"><p>9</p></div>
<div class="item" style="--color:#429b3e;"><p>10</p></div>
<div class="item" style="--color:#429b3e;"><p>11</p></div>     
</div>
</div>

#cuadricula {
  display: grid;
  grid-template-columns:repeat(5, minmax(auto,100px)); 
  grid-template-rows:repeat(auto-fill, 100px);
  margin:1em 0;
  border: 1px dashed red;
  grid-auto-flow: row;  /* or 'row dense', 'column', 'column dense' */
}
.item {
  padding: 1em;
  border-radius:10px;
  border: 1px solid #000; 
  background-color:#3E989B;
  background-color:var(--color);
  display:grid;
}

.item p {
  justify-self: center;
  align-self: center;
  color:white;
}
.item:nth-child(3n){grid-row-end:span 2;}
.item:nth-child(2n){grid-column-end:span 2;}



/*unimportant stuff*/
body {
  font-family: Verdana, Geneva, sans-serif;
  line-height: 2em;
  color:#777;
  font-size: 18px;
}

#wrapper{width:50%;
  max-width:500px;
  min-width:270px;
  margin:1em auto;
}
var radios = document.querySelector("#gridAutoFlow");
var grid = document.querySelector("#cuadricula");
radios.addEventListener("change",function(evt){
  var val = evt.target.value; 
  grid.style.gridAutoFlow = val;
}, false);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.