I am using a grid layout to show several rows. Each row contains 3 columns (an image, a label and an svg graphic) and I want (based on some logic not relevant here) to hide/unhide entire rows.
After a lot of trial and error and reading a myriad of different blog posts, I adapted the following approach which is pretty close to what I want to achieve.
There are 3 minor things which, however, bother me.
- Neither the
<img>nor the<svg>are completely centered..grid-rowis4pxtaller than necessary (it’s height is104px, while both the<img>and the<svg>are100pxtall). Why? How to get rid of the4px? - In the transition, the content and the surrounding grid do not move at teh same speed. I’d like that the whole row disappears as one unit. now, the image, text and svg seem to disappear on their own. Furthermore the last bit of the row disappears from the top, while everything else disappears from the bottom. How to change that?
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>