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;
  }

网格具有 div 类grid-content并且其中的项目具有 div 类clickable_item

单击网格上的任何项目都会将此 div 块移动到所选项目的下方。 这个 div 占据了行的全部宽度，需要调整它的grid-column: 1 / span n属性以保持对网格中行列数的响应。

目前grid-column 1 / span 8属性是固定的，不会动态调整以改变环绕网格中的列。

项目应该有一个唯一的 id，并且还必须在单击时在其行下方显示或隐藏全宽 div

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

更新：使用

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

从调整大小侦听器更新样式属性。
在 codepen 演示中包装期间，全宽 div 会与其他项目混淆。 如何每次移动 div 以跨越网格中的列？

Answer 1

我相信这就是你想要的：

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

基本上，使用函数insertAdjacetElement它将允许您在您选择的位置插入一个元素。

还要注意，在这种情况下，您需要遍历 DOM，因此：

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