我需要能够删除本机css网格中的一行..但由于我们只是指定列而行是自动的我无法找到方法..有没有办法包装列不会影响网格布局的div?
继承我拥有的东西和小提琴:
HTML:
<div class="container">
<div id="id0" class="col colSpan3"></div>
<div class="col rowSpan2"></div>
<div class="col rowSpan2"></div>
<div class="col rowSpan2"></div>
</div>
的CSS:
.container {
max-width: 960px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 6px;
}
.col {
height: 100px;
border: solid 1px black;
}
.colSpan2 { grid-column: auto / span 2;}
.colSpan3 { grid-column: auto / span 3;}
.rowSpan2 { grid-row: auto / span 2;}
.rowSpan3 { grid-row: auto / span 3;}
JS:
var id0 = document.getElementById("id0");
id0.onclick = function() { id0.remove(); }
https://jsfiddle.net/x8t0a82b/1/
我可以删除第一行,因为它跨越所有列,但我无法找到删除整行的方法。
答案 0 :(得分:0)
为作业使用Css变量:
:root {
--rowNum: 4;
--colNum: 5;
--gridHeight: 120px;
}
.wrapper {
display: grid;
grid-template-rows: repeat(var(--rowNum), var(--gridHeight));
grid-template-columns: repeat(var(--colNum), auto);
}
.grid-item {
grid-column-start: auto;
grid-row-start: auto;
margin: 5px;
}
<div class="wrapper">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
function del() {
$('.grid-item:last-child').parentNode.removeChild($('.grid-item:last-child'));
updateVar();
}
function updateVar(action) {
let htmlStyles = window.getComputedStyle($("html"));
let rowNum = parseInt(htmlStyles.getPropertyValue("--rowNum"));
let colNum = parseInt(htmlStyles.getPropertyValue("--colNum"));
let gridItemsCount = document.querySelectorAll('.grid-item').length;
document.documentElement.style.setProperty(`--rowNum`, Math.ceil(gridItemsCount/colNum));
}
答案 1 :(得分:0)
您可以在每个元素上设置一个类,然后使用.querySelectorAll()
删除它们:
HTML
<div id='theGrid'>
...
<div class='cell1 row1'>1-1</div>
<div class='cell2 row1'>2-1</div>
<div class='cell3 row1'>3-1</div>
...
</div>
JS
const grid = document.getElementById('theGrid');
Array.from(grid.querySelectorAll('row1'))
.forEach(domNode => domNode.parentNode.removeChild(domNode));