Soy aficionado con el diseño de cuadrícula CSS. Lo que estoy tratando de hacer es eliminar algunos elementos de la cuadrícula con un evento onclick() y hacer que los elementos restantes se reposicionen y adquieran la forma de los eliminados de esta manera:

Mis códigos eliminan "A" de la cuadrícula, pero no pueden cambiar la forma de "B" y "C". ¿Hay alguna manera de lograr esto con css o js muy simple? Tendré muchos otros botones para eliminar muchas otras celdas, así que trato de mantener los códigos lo más cortos posible.

HTML

 <div class="container"> <div class="grid a">Grid A</div> <div class="grid b">Grid B</div> <div class="grid c">Grid C</div> <div class="grid a">Grid A</div> <div class="grid b">Grid B</div> <div class="grid c">Grid C</div> <div class="grid a">Grid A</div> <div class="grid b">Grid B</div> <div class="grid c">Grid C</div> </div> <div class="button" onclick="hide()">Hide Grid A</div>

JS

 function hide() { var element = document.getElementsByClassName("a"); var i; for (i=0; i<element.length; i++) { if (element[i].style.display) { element[i].style.display = null; } else {element[i].style.display = "none"; } } }

CSS

 .container { width: 500px; margin: auto; display: grid; grid-gap: 10px; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 100px; counter-reset: div; } .grid { border: solid; } .grid:nth-child(6n + 1), .grid:nth-child(6n + 4) { grid-column: auto /span 2; grid-row: auto /span 2; }