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)