<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);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.