{
CF
}
Code
Fronts
Back to CSS Grid Layouts
Quantity Query
Pure CSS
Edit any tab — preview updates live
CSS
HTML
Reset
Copy
.gl-qq { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 320px; font-family: monospace; font-size: 12px; color: #f0eeff; } .gl-qq > div { background: rgba(124,108,255,0.14); border: 1px solid rgba(124,108,255,0.3); border-radius: 6px; padding: 18px 0; text-align: center; } /* Stretch the last cell when it's an orphan in row 3 */ .gl-qq:has(> div:nth-child(7):last-child) > div:last-child { grid-column: 1 / -1; background: linear-gradient(135deg, #7c6cff, #a78bfa); color: #fff; font-weight: 700; }
<div class="gl-qq"> <div>1</div><div>2</div><div>3</div> <div>4</div><div>5</div><div>6</div> <div>7</div> </div>
Live preview
Ready