Grid Selection List

HTML_STRUCTURE

<div class='bh-list-v1-grid'><div class='active'>A1</div><div>A2</div><div>A3</div></div>

CSS_STYLING

.bh-list-v1-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 200px; } .bh-list-v1-grid div { aspect-ratio: 1; border: 1px solid #222; display: flex; align-items: center; justify-content: center; font-weight: 900; color: #444; cursor: pointer; transition: 0.2s; } .bh-list-v1-grid div.active { background: #fff; color: #000; border-color: #fff; } .bh-list-v1-grid div:hover:not(.active) { border-color: #fff; color: #fff; }

// DESIGN_NOTES: Komponen ini menggunakan CSS variabel untuk memudahkan kustomisasi warna dan transisi.