Place and stretch items with grid-column: 1 / 3 (spans 2 columns) or the span keyword (grid-column: span 2). Same for grid-row. This is how a featured card takes two columns or a hero spans the full width.
Place and stretch items with grid-column: 1 / 3 (spans 2 columns) or the span keyword (grid-column: span 2). Same for grid-row. This is how a featured card takes two columns or a hero spans the full width.
<!doctype html><html><head><meta charset="utf-8">
<style>.g{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.g div{background:#b388ff;color:#06040d;padding:18px;text-align:center}.big{grid-column:span 2}</style></head><body style="background:#06040d;padding:20px"><div class="g"><div class="big">spans 2</div><div>2</div><div>3</div><div>4</div></div></body></html>