网格中的可折叠行

Question

我正在使用网格布局来显示几行。每行包含 3 列（一个图像、一个标签和一个 svg 图形），我想（基于一些与此处不相关的逻辑）隐藏/取消隐藏整个行。

经过大量的尝试和错误并阅读了无数不同的博客文章后，我采用了以下方法，该方法非常接近我想要实现的目标。

然而，有两件小事困扰着我。

1. <img>

   和

   <svg>

   都不是完全居中的。

   .grid-row

   比所需高度高

   4px

   （它的高度为

   104px

   ，而

   <img>

   和

   <svg>

   都

   100px

   高）。为什么？如何摆脱

   4px

   ？ @Paulie_D 的评论解决了这个问题
2. 在过渡中，内容和周围的网格不以相同的速度移动。我希望整行作为一个整体消失。现在，图像、文本和 svg 似乎自行消失了。此外，该行的最后一位从顶部消失，而其他所有内容都从底部消失。怎么改变呢？

function toggleRow() {
  const i = d3.select('#row').property('value');
  const row = d3.select('.grid-row:nth-child(' + i +')');
  row.classed('visible', !row.classed('visible'));
}

:root {
  --transitionLength: 0.4s;
  --transitionTiming: ease;
}

.grid {
  display: inline-grid;
  grid-template-columns: 110px minmax(200px, max-content) 1fr;
  row-gap: 5px;
}

.grid-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: 0fr;
  grid-column: 1 / 4;
  align-items: center;
  column-gap: 10px;
  overflow: hidden;
  background-color: lightgray;
  transition: grid-template-rows var(--transitionLength) var(--transitionTiming);
}

.grid > .visible {
  grid-template-rows: 1fr;
}

.grid-item {
  min-height: 0;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--transitionLength) var(--transitionTiming),
    visibility 0s var(--transitionLength) var(--transitionTiming);
}

.grid > .visible > .grid-item {
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--transitionLength) var(--transitionTiming),
    visibility 0s linear;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.7.0/d3.min.js"></script>
<div class="grid">
  <div class="grid-row visible">
    <div class="grid-item img"><img src="https://picsum.photos/100" alt="Placeholder Image"/></div>
    <div class="grid-item label">
      <h2>Can be a long Line with several words...</h2>
    </div>
    <div class="grid-item svg">
      <svg xmlns="http://www.w3.org/2000/svg" width="163.63" height="100" viewBox="0 0 18 11">
        <rect width="18" height="11" fill="#fff" />
        <path d="M0,5.5h18M6.5,0v11" stroke="#002F6C" stroke-width="3" />
      </svg>
    </div>
  </div>
  <div class="grid-row">
    <div class="grid-item img"><img src="https://picsum.photos/100"  alt="Placeholder Image" /></div>
    <div class="grid-item label">
      <h2>...or very short</h2>
    </div>
    <div class="grid-item svg">
      <svg xmlns="http://www.w3.org/2000/svg" width="163.63" height="100" viewBox="0 0 18 11">
        <rect width="18" height="11" fill="#fff" />
        <path d="M0,5.5h18M6.5,0v11" stroke="#002F6C" stroke-width="3" />
      </svg>
    </div>
  </div>
</div>
<br>
<input type="number" id="row" name="number" min="1" max="3" value="1" />
<button onclick="toggleRow()">Toggle Row</button>

Answer 1

我认为我把事情搞得太复杂了。在

grid-template-rows

上进行简单的转换（无需变换）就可以解决问题。

NB. 我需要删除

align-items

规则，以免隐藏的内容仍然突出（无论出于何种原因）。

function toggleRow() {
  const i = d3.select('#row').property('value');
  const row = d3.select('.grid-row:nth-child(' + i +')');
  row.classed('visible', !row.classed('visible'));
}

:root {
  --transitionLength: 250ms;
  --transitionTiming: ease-out;
}

.grid {
  display: inline-grid;
  grid-template-columns: 110px minmax(200px, max-content) 1fr;
  row-gap: 5px;
}

.grid-row {
  display: grid;
  grid-column: 1/4;
  grid-template-columns: subgrid;
  background-color: lightgray;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transitionLength) var(--transitionTiming);
  /*align-items: center;*/
  column-gap: 10px;
}

.grid > .visible {
  grid-template-rows: 1fr;
}

.grid-row > .grid-item {
  overflow: hidden;
  min-height: 0;
}


.grid-item > img, .grid-item > svg {
  vertical-align: middle;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.7.0/d3.min.js"></script>
<div class="grid">
  <div class="grid-row visible">
    <div class="grid-item img"><img src="https://picsum.photos/100" alt="Placeholder Image" /></div>
    <div class="grid-item label">
      <h2>Can be a long Line with several words...</h2>
    </div>
    <div class="grid-item svg">
      <svg xmlns="http://www.w3.org/2000/svg" width="163.63" height="100" viewBox="0 0 18 11">
        <rect width="18" height="11" fill="#fff" />
        <path d="M0,5.5h18M6.5,0v11" stroke="#002F6C" stroke-width="3" />
      </svg>
    </div>
  </div>
  <div class="grid-row">
    <div class="grid-item img"><img src="https://picsum.photos/100"  alt="Placeholder Image" /></div>
    <div class="grid-item label">
      <h2>...or very short</h2>
    </div>
    <div class="grid-item svg">
      <svg xmlns="http://www.w3.org/2000/svg" width="163.63" height="100" viewBox="0 0 18 11">
        <rect width="18" height="11" fill="#fff" />
        <path d="M0,5.5h18M6.5,0v11" stroke="#002F6C" stroke-width="3" />
      </svg>
    </div>
  </div>
</div>
<br>
<div>
<input type="number" id="row" name="number" min="1" max="3" value="1" />
<button onclick="toggleRow()">Toggle Row</button>
</div>