You can easily make grid expanding columns with CSS.
Follow below steps
Step 1: Add HTML
<div class="grid"> <div class="col_1"></div> <div class="col_2"></div> <div class="col_3"></div> <div class="col_4"></div> </div>
Step 2: Add CSS
.grid { height: 450px; transition:0.3s ease-in-out; display: grid; grid-template-columns:25% 25% 25% 25%; gap: 4px; background: #ced220; cursor: pointer; overflow: hidden; } :where(.col_1, .col_2, .col_3, .col_4) { background: #008264; transition:0.3s ease-in-out; } :where(.col_1, .col_2, .col_3, .col_4):hover { background: #ced220; } .grid:has(.col_1:hover) { grid-template-columns: 40% 20% 20% 20%; } .grid:has(.col_2:hover) { grid-template-columns: 20% 40% 20% 20%; } .grid:has(.col_3:hover) { grid-template-columns:20% 20% 40% 20%; } .grid:has(.col_4:hover) { grid-template-columns:20% 20% 20% 40%; }
Checkout Live Demo Grid Animation