时间戳

首页 > 解决方案 > 在 CSS 显示网格中插入响应式全宽 div

javascript - 在 CSS 显示网格中插入响应式全宽 div

问题描述

.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 以跨越网格中的列？

标签： javascripthtmlcssonclickcss-grid

解决方案

我相信这就是你想要的：

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

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

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

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

推荐阅读