body{background:#333}.grid-container{display:grid;grid-template-columns:repeat(9,1fr);width:324px;margin:auto}.grid-item{box-sizing:border-box;background-color:#f0f0f0;border:1px solid #555;width:36px;height:36px;display:flex;align-items:center;justify-content:center}.grid-item.group-1{background:#778beb}.grid-item.group-2{background:#e77f67}.grid-item.group-3{background:#26de81}.grid-item.group-4{background:#596275}.grid-item.group-5{background:#786fa6}.grid-item.group-6{background:#3dc1d3}.grid-item.group-7{background:#303952}.grid-item.group-8{background:#fa8231}.grid-item.group-9{background:#d63031}svg{width:17px}