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

Question

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

每行的高度应根据任何给定单元格中的最大数据增长。我把这个基本版本放在一起，它显示了我到目前为止所拥有的（对于重复 <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>

我想为每一列启用 drag/drop 排序，并希望将每一列包含在一个元素中（这样我就可以定位 <div class="col-2">...all <div class="items"> within this col...</div>）。是否可以使用网格标记来实现这一点？或者是针对构成 Javascript.

列的每个人 <div class="items"></div> 的最佳方法

Answer 1

在网格布局中，您可以使用 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>

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

Target CSS grid column within a single element

html

css

css-selectors

columnsorting

css-grid