Свертываемые строки в сетке

Я использую макет сетки, чтобы показать несколько строк. Каждая строка содержит 3 столбца (изображение, метка и изображение svg), и я хочу (на основе некоторой логики, которая здесь не актуальна) скрыть/показать целые строки.

После множества проб и ошибок и чтения множества различных сообщений в блогах я адаптировал следующий подход, который довольно близок к тому, чего я хочу достичь.

Однако есть 2 незначительные вещи, которые меня беспокоят.

Ни <img>, ни <svg> не полностью центрированы. .grid-row4px выше необходимого (его высота равна 104px, тогда как и <img>, и <svg> высокие 100px). Почему? Как избавиться от 4px? Комментарий от @Paulie_D решил эту проблему
При переходе контент и окружающая сетка движутся с разной скоростью. Я бы хотел, чтобы вся строка исчезла как единое целое. теперь изображение, текст и 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>

Для пункта 1 — stackoverflow.com/questions/5804256/…

— 22.05.2024 17:18

Ах, спасибо, проблемы 1 больше нет, спасибо!

— 22.05.2024 17:21

html css css-grid

22.05.2024 16:59

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Мне кажется, я немного усложнил ситуацию. Простой переход (без преобразования) на grid-template-rows должен помочь.

Н.Б. Мне нужно было удалить правило 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>

23.05.2024 11:36

Другие вопросы по теме

Необычная форма со скругленными углами и градиентной каймой

Индивидуальный макет карусели совы

CSS для создания иерархического упорядоченного списка, который приводит к 1, 1.1, a, i

Как открыть изображение по клику

Как добавить в код код анимации спиннера и прекратить загрузку страницы после завершения

Пусть наложение div станет видимым через переход/анимацию круга клип-пути

Как добавить пунктирное подчеркивание для каждой строки в элементах многострочного списка

Прикрепленный заголовок таблицы перекрывается с панелью навигации

Правая граница гибкого элемента div не учитывается в окнах просмотра с узкой шириной

Верхний и нижний колонтитулы не занимают всю ширину

Свертываемые строки в сетке

Ответы 1

Другие вопросы по теме

Похожие вопросы