<div class="container">
  <div class="item item--1">1 { grid-area: auto / span 2 }</div>
  <div class="item item--2">2 { grid-area: 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 class="item">7</div>
</div>
<br>

<input type="radio" name="grid" id="option-1" checked>
<label for="option-1">grid: auto-flow / repeat(3, 1fr);</label>
<br>
<input type="radio" name="grid" id="option-2">
<label for="option-2">grid: auto-flow <strong>dense</strong> / repeat(3, 1fr);</label>
/* -------- Skip this base code -------- */
* { box-sizing: border-box; } .container { display: grid; gap: 1px; padding: 1px; border: 16px solid silver; } .item { padding: 8px; line-height: 1; color: white; background: coral; } .item--1, .item--2 { background: royalblue; }

.container { grid: auto-flow / repeat(3, 1fr); }
.container .item--1,
.container .item--2 { grid-area: auto / span 2; }

/* 
아이템의 수량 제한이 없을 때 사용하는 grid 단축 속성 값 패턴:
* [ auto-flow && dense? ] <‘grid-auto-rows’>? / <‘grid-template-columns’>
* <‘grid-template-rows’> / [ auto-flow && dense? ] <‘grid-auto-columns’>?

'auto-flow' 값을 선언하면 'grid-auto-flow' 속성의 값이 'row' 또는 'column'으로 설정된다. 'row' 값은 아이템이 행축(x)으로 흐르고 'column' 값은 아이템이 열축(y)으로 흐른다. 'dense' 값을 추가하면 밀집 상태로 패킹된다. 빈 트랙이 발생한 경우 빈 트랙에 알맞는 크기의 아이템이 흐름에서 벗어나 빈 트랙을 매운다.
*/
document.addEventListener('change', () => {
  document.querySelector('#option-2').checked === true 
    ? document.querySelector('.container').style.grid = 'auto-flow dense / repeat(3, 1fr)'
    : document.querySelector('.container').style.grid = 'auto-flow / repeat(3, 1fr)';
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.