问动态CSS网格:一行3科尔，随机位置1全宽

EN

const button = document.querySelector('#btn');
const target = document.querySelector('#target');

button.addEventListener('click', () => {
    target.classList.toggle('featured');    
})

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: .5rem;
  margin-bottom: 1rem;
  grid-auto-flow: dense;
}

.cell {
  height: 50px;
  background-color: lightgrey;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cell.featured {
  background-color: pink;
  grid-column: 1 / -1;
}

<div class="grid">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div id="target" class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>
  <div class="cell">7</div>
  <div class="cell">8</div>
</div>

<button id="btn">Toggle featured</button>