<h2 id="heading-1">grid-auto-flow: row;</h2>
<div class="container container--1">
  <div class="item">1 (auto / span 2)</div>
  <div class="item">2 (auto / span 2)</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>
<br>
<h2 id="heading-2">grid-auto-flow: column;</h2>
<div class="container container--2">
  <div class="item">1 (span 2 / auto)</div>
  <div class="item">2 (span 2 / auto)</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>
<br>
<p>
  <input type="checkbox" id="dense">
  <label for="dense">dense ⬅️ Check this option!</label>
</p>
/* -------- Skip this base code -------- */
* { box-sizing: border-box; } h2 { margin: 0; font-size: 24px; } .container { display: grid; grid: repeat(3, 1fr) / repeat(3, 1fr); gap: 1px; padding: 1px; border: 16px solid silver; color: white; } .item { padding: 8px; background: coral; } .item:nth-child(n+3) { background: royalblue; }

.container--1 { grid-auto-flow: row; }
.container--1 .item:nth-child(-n+2) { grid-area: auto / span 2; }

.container--2 { grid-auto-flow: column; }
.container--2 .item:nth-child(-n+2) { grid-area: span 2 / auto; }
document.querySelector('#dense').addEventListener('change', function (e) {
  if (e.target.checked === true) {
    document.querySelector('#heading-1').textContent = 'grid-auto-flow: row dense;';
    document.querySelector('#heading-2').textContent = 'grid-auto-flow: column dense;';
    document.querySelector('.container--1').style.gridAutoFlow = 'row dense';
    document.querySelector('.container--2').style.gridAutoFlow = 'column dense';
  } else {
    document.querySelector('#heading-1').textContent = 'grid-auto-flow: row;';
    document.querySelector('#heading-2').textContent = 'grid-auto-flow: column;';
    document.querySelector('.container--1').style.gridAutoFlow = 'row';
    document.querySelector('.container--2').style.gridAutoFlow = 'column';
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.