CSS 显示网格中的响应式全宽 div 插入

Question

.grid-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: auto;
  }
  .grid-content > div > div > div {
    background: black;
    display: grid;
  }
  
  .grid-content > div > div > div::before {
    content: "";
    display: block;
    padding-bottom: 100%;
    grid-area: 1 / 1 / 2 / 2;
  }

the grid has the div class grid-content and the items in it have a div class clickable_item

Clicking on any item on the grid will move this div block to below that selected item. This div occupies the full width of the row and needs to adjust its grid-column: 1 / span n property to stay responsive to the number of row columns in the grid.

Currently the grid-column 1 / span 8 property is fixed and doesnt dynamically adjust to changing columns in the wrapping grid.

Items should have a unique id and also must show or hide a full width div below its row when it is clicked

https://codepen.io/ridhwaans/pen/jOrpeNW

update: using

gridComputedStyle.getPropertyValue("grid-template-columns").replace(' 0px', '').split(' ').length;

from a resize listener to update style property.
The full width div messes with other items during wrapping in the codepen demo. How do I move the div every time to span the columns in grid?

Answer 1

I believe this is what you want:

https://codepen.io/riza-khan/pen/VwjBqVd

Basically, use the function insertAdjacetElement which will allow you to insert an element in the position of your choosing.

And also note, you need to traverse the DOM in this case so:

e.target.parentElement.parentElement.insertAdjacentElement('afterend', some_node)