单个元素中的目标CSS网格列

我正在构建一个比较图，我需要将第一列固定在视图的左侧，将最后一行固定在视图底部，同时考虑相邻单元格的列宽和行高。

每一行的高度应该根据任何给定单元格中的最大数据增长。我整理了这个基本版本，它显示了我到目前为止所拥有的内容(很抱歉重复了<div class="items">，我需要足够的内容来显示粘性页脚(：

* {
box-sizing: border-box;
}
body {
overflow: hidden;   
}
.container {
overflow: auto;
height: calc(100vh - 80px);
margin-top: 80px;
padding-left: 15px;
}
.heading {
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
top: 0;
left: 0;
height: 80px;
z-index: 1;
background: white;
right: 0;
padding: 15px;
} 
.compare {
width: max-content;
}
.grid {
display: grid;
position: relative;
grid-template-columns: repeat(6, 300px);
align-items: stretch;
}
.item {
padding: 10px;
}
.title {
position: sticky;
left: 0;
background-color: red;
}
.section span {
position: sticky;
left: 0;
background-color: green;
}
.footer {
position: sticky;
bottom: 0;
background: yellow;
}
// To highlight the problem I'm trying to solve
.item:nth-child(3),
.item:nth-child(9),
.item:nth-child(15),
.item:nth-child(21) {
border: 1px dashed blue;
border-top: none;
border-bottom: none;
}
.item:nth-child(3) {
border-top: 1px dashed blue;
}
.item:nth-child(21) {
border-bottom: 1px dashed blue;
}

<div class="container">
<div class="heading">
<h1>Compare</h1>
<button>Back</button>
</div>
<div class="compare">
<div class="section">
<span>Section title</span>
</div>
<div class="grid">
<div class="item title">Key</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item title">Key</div>
<div class="item">Value</div>
<div class="item">Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value </div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item title">Key</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item title">Key</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
</div>
<div class="section">
<span>Section title</span>
</div>
<div class="grid">
<div class="item title">Key</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item title">Key</div>
<div class="item">Value</div>
<div class="item">Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value </div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item title">Key</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item title">Key</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
</div>
<div class="section">
<span>Section title</span>
</div>
<div class="grid">
<div class="item title">Key</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item title">Key</div>
<div class="item">Value</div>
<div class="item">Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value </div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item title">Key</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item title">Key</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
</div>
<div class="section">
<span>Section title</span>
</div>
<div class="grid">
<div class="item title">Key</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item title">Key</div>
<div class="item">Value</div>
<div class="item">Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value </div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item title">Key</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item title">Key</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
<div class="item">Value</div>
</div>
<div class="grid footer">
<div class="item title">Key</div>
<div class="item">CTA</div>
<div class="item">CTA</div>
<div class="item">CTA</div>
<div class="item">CTA</div>
<div class="item">CTA</div>
</div>
</div>
</div>

我想为每一列启用拖放排序，并希望将每一列包含在一个元素中(这样我就可以针对例如<div class="col-2">...all <div class="items"> within this col...</div>(。有可能通过网格标记实现这一点吗？或者是用Javascript针对组成一列的每个单独的<div class="items"></div>的最佳方法。

在网格布局中，可以使用display:contents:将单元格包装在div中

:root {
--col-no: 1;
}
.wrapper {
height: 300px;
width: 100vw;
display: grid;
grid-template-columns: 100px repeat(6, 150px);
grid-auto-flow: column;
overflow: scroll;
}
.section {
background-color: lightgreen;
}
.title {
background-color: orange !important;
}
.col {
/* disply contents */
display: contents;
}
.col:nth-child(2n + 2)>* {
background-color: #ddd;
}
.col:first-child>div {
position: sticky;
left: 0;
}
.col>* {
grid-column: var(--col-no);
}
.footer {
display: contents;
}
.footer>div {
background-color: yellow;
grid-row: 1000;
position: sticky;
bottom: 0;
}
.col:nth-child(1) {
--col-no: 1;
}
.col:nth-child(2) {
--col-no: 2;
}
.col:nth-child(3) {
--col-no: 3;
}
.col:nth-child(4) {
--col-no: 4;
}
.col:nth-child(5) {
--col-no: 5;
}
.col:nth-child(6) {
--col-no: 6;
}

<div class="wrapper">
<div class="col">
<div class="section">
<span>Section title1</span>
</div>
<div class="item title">Key</div>
<div class="item title">Key</div>
<div class="item title">Key</div>
<div class="item title">Key</div>
<div class="section">
<span>Section title2</span>
</div>
<div class="item title">Key</div>
<div class="item title">Key</div>
<div class="item title">Key</div>
<div class="item title">Key</div>
<div class="section">
<span>Section title3</span>
</div>
<div class="item title">Key</div>
<div class="item title">Key</div>
<div class="item title">Key</div>
<div class="item title">Key</div>
</div>
<div class="col">
<div class="items"></div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value value value =</div>
<div class="items">value</div>
<div class="items"></div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items"></div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
</div>
<div class="col">
<div class="items"></div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items"></div>
<div class="items">value abc abc efgh hijk lmin = =</div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items"></div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
</div>
<div class="col">
<div class="items"></div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items"></div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items"></div>
<div class="items">value</div>
<div class="items">value value value value value===</div>
<div class="items">value</div>
<div class="items">value</div>
</div>
<div class="col">
<div class="items"></div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value value value value value</div>
<div class="items">value</div>
<div class="items"></div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items"></div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
</div>
<div class="col">
<div class="items"></div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value value value</div>
<div class="items">value</div>
<div class="items"></div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items"></div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
<div class="items">value</div>
</div>

<div class="grid footer">
<div class="item title">Foot Key</div>
<div class="item">CTA</div>
<div class="item">CTA</div>
<div class="item">CTA</div>
<div class="item">CTA</div>
<div class="item">CTA</div>
</div>
</div>

通过访问.col元素，可以控制轴网列。此外，拖动事件确实会在.col元素上触发。

<script>
let cols = document.querySelectorAll('.col');
cols.forEach(c => c.addEventListener('dragstart', () => {
console.log('dragstarted')
}));
</script>

相关内容

最新更新

热门标签：